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

393 lines
3 MiB
JavaScript
Raw Permalink Normal View History

var LikeC4Views=(function(u6){"use strict";/* prettier-ignore-start */
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
/* eslint-disable */
/******************************************************************************
* This file was generated
* DO NOT EDIT MANUALLY!
******************************************************************************/
function S1e(e,r){for(var n=0;n<r.length;n++){const o=r[n];if(typeof o!="string"&&!Array.isArray(o)){for(const a in o)if(a!=="default"&&!(a in e)){const i=Object.getOwnPropertyDescriptor(o,a);i&&Object.defineProperty(e,a,i.get?i:{enumerable:!0,get:()=>o[a]})}}}return Object.freeze(Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}))}function Vz(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var d6={exports:{}},p1={};var qz;function C1e(){if(qz)return p1;qz=1;var e=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function n(o,a,i){var s=null;if(i!==void 0&&(s=""+i),a.key!==void 0&&(s=""+a.key),"key"in a){i={};for(var l in a)l!=="key"&&(i[l]=a[l])}else i=a;return a=i.ref,{$$typeof:e,type:o,key:s,ref:a!==void 0?a:null,props:i}}return p1.Fragment=r,p1.jsx=n,p1.jsxs=n,p1}var Uz;function T1e(){return Uz||(Uz=1,d6.exports=C1e()),d6.exports}var y=T1e(),p6={exports:{}},Ot={};var Wz;function A1e(){if(Wz)return Ot;Wz=1;var e=Symbol.for("react.transitional.element"),r=Symbol.for("react.portal"),n=Symbol.for("react.fragment"),o=Symbol.for("react.strict_mode"),a=Symbol.for("react.profiler"),i=Symbol.for("react.consumer"),s=Symbol.for("react.context"),l=Symbol.for("react.forward_ref"),c=Symbol.for("react.suspense"),u=Symbol.for("react.memo"),d=Symbol.for("react.lazy"),h=Symbol.for("react.activity"),f=Symbol.iterator;function g(G){return G===null||typeof G!="object"?null:(G=f&&G[f]||G["@@iterator"],typeof G=="function"?G:null)}var b={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},x=Object.assign,w={};function k(G,K,j){this.props=G,this.context=K,this.refs=w,this.updater=j||b}k.prototype.isReactComponent={},k.prototype.setState=function(G,K){if(typeof G!="object"&&typeof G!="function"&&G!=null)throw Error("takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,G,K,"setState")},k.prototype.forceUpdate=function(G){this.updater.enqueueForceUpdate(this,G,"forceUpdate")};function C(){}C.prototype=k.prototype;function _(G,K,j){this.props=G,this.context=K,this.refs=w,this.updater=j||b}var T=_.prototype=new C;T.constructor=_,x(T,k.prototype),T.isPureReactComponent=!0;var A=Array.isArray;function R(){}var D={H:null,A:null,T:null,S:null},N=Object.prototype.hasOwnProperty;function M(G,K,j){var Y=j.ref;return{$$typeof:e,type:G,key:K,ref:Y!==void 0?Y:null,props:j}}function O(G,K){return M(G.type,K,G.props)}function F(G){return typeof G=="object"&&G!==null&&G.$$typeof===e}function L(G){var K={"=":"=0",":":"=2"};return"$"+G.replace(/[=:]/g,function(j){return K[j]})}var U=/\/+/g;function P(G,K){return typeof G=="object"&&G!==null&&G.key!=null?L(""+G.key):K.toString(36)}function V(G){switch(G.status){case"fulfilled":return G.value;case"rejected":throw G.reason;default:switch(typeof G.status=="string"?G.then(R,R):(G.status="pending",G.then(function(K){G.status==="pending"&&(G.status="fulfilled",G.value=K)},function(K){G.status==="pending"&&(G.status="rejected",G.reason=K)})),G.status){case"fulfilled":return G.value;case"rejected":throw G.reason}}throw G}function I(G,K,j,Y,Q){var J=typeof G;(J==="undefined"||J==="boolean")&&(G=null);var ie=!1;if(G===null)ie=!0;else switch(J){case"bigint":case"string":case"number":ie=!0;break;case"object":switch(G.$$typeof){case e:case r:ie=!0;break;case d:return ie=G._init,I(ie(G._payload),K,j,Y,Q)}}if(ie)return Q=Q(G),ie=Y===""?"."+P(G,0):Y,A(Q)?(j="",ie!=null&&(j=ie.replace(U,"$&/")+"/"),I(Q,K,j,"",function(ge){return ge})):Q!=null&&(F(Q)&&(Q=O(Q,j+(Q.key==null||G&&G.key===Q.key?"":(""+Q.key).replace(U,"$&/")+"/")+ie)),K.push(Q)),1;ie=0;var ne=Y===""?".":Y+":";if(A(G))for(var re=0;re<G.length;re++)Y=G[re],J=ne+P(Y,re),ie+=I(Y,K,j,J,Q);else if(re=g(G),typeof re=="function")for(G=re.call(G),re=0;!(Y=G.next()).done;)Y=Y.value,J=ne+P(Y,re++),ie+=I(Y,K,j,J,Q);else if(J==="object"){if(typeof G.then=="function")return I(V(G),K,j,Y,Q);throw K=String(G),Error("Objects are not valid as a React chi
`,r);return o===-1?n:n===-1||n+1===o?o:n<o?n:o}const Fd={html:"http://www.w3.org/1999/xhtml",mathml:"http://www.w3.org/1998/Math/MathML",svg:"http://www.w3.org/2000/svg",xlink:"http://www.w3.org/1999/xlink",xml:"http://www.w3.org/XML/1998/namespace",xmlns:"http://www.w3.org/2000/xmlns/"},$O={}.hasOwnProperty,mbe=Object.prototype;function gbe(e,r){const n=r||{};return e8({file:n.file||void 0,location:!1,schema:n.space==="svg"?_1:lx,verbose:n.verbose||!1},e)}function e8(e,r){let n;switch(r.nodeName){case"#comment":{const o=r;return n={type:"comment",value:o.data},cx(e,o,n),n}case"#document":case"#document-fragment":{const o=r,a="mode"in o?o.mode==="quirks"||o.mode==="limited-quirks":!1;if(n={type:"root",children:MO(e,r.childNodes),data:{quirksMode:a}},e.file&&e.location){const i=String(e.file),s=fbe(i),l=s.toPoint(0),c=s.toPoint(i.length);n.position={start:l,end:c}}return n}case"#documentType":{const o=r;return n={type:"doctype"},cx(e,o,n),n}case"#text":{const o=r;return n={type:"text",value:o.value},cx(e,o,n),n}default:return n=ybe(e,r),n}}function MO(e,r){let n=-1;const o=[];for(;++n<r.length;){const a=e8(e,r[n]);o.push(a)}return o}function ybe(e,r){const n=e.schema;e.schema=r.namespaceURI===Fd.svg?_1:lx;let o=-1;const a={};for(;++o<r.attrs.length;){const l=r.attrs[o],c=(l.prefix?l.prefix+":":"")+l.name;$O.call(mbe,c)||(a[c]=l.value)}const s=(e.schema.space==="svg"?hbe:pbe)(r.tagName,a,MO(e,r.childNodes));if(cx(e,r,s),s.tagName==="template"){const l=r,c=l.sourceCodeLocation,u=c&&c.startTag&&cf(c.startTag),d=c&&c.endTag&&cf(c.endTag),h=e8(e,l.content);u&&d&&e.file&&(h.position={start:u.end,end:d.start}),s.content=h}return e.schema=n,s}function cx(e,r,n){if("sourceCodeLocation"in r&&r.sourceCodeLocation&&e.file){const o=bbe(e,n,r.sourceCodeLocation);o&&(e.location=!0,n.position=o)}}function bbe(e,r,n){const o=cf(n);if(r.type==="element"){const a=r.children[r.children.length-1];if(o&&!n.endTag&&a&&a.position&&a.position.end&&(o.end=Object.assign({},a.position.end)),e.verbose){const i={};let s;if(n.attrs)for(s in n.attrs)$O.call(n.attrs,s)&&(i[Q6(e.schema,s).property]=cf(n.attrs[s]));n.startTag;const l=cf(n.startTag),c=n.endTag?cf(n.endTag):void 0,u={opening:l};c&&(u.closing=c),u.properties=i,r.data={position:u}}}return o}function cf(e){const r=PO({line:e.startLine,column:e.startCol,offset:e.startOffset}),n=PO({line:e.endLine,column:e.endCol,offset:e.endOffset});return r||n?{start:r,end:n}:void 0}function PO(e){return e.line&&e.column?e:void 0}class E1{constructor(r,n,o){this.property=r,this.normal=n,o&&(this.space=o)}}E1.prototype.property={},E1.prototype.normal={},E1.prototype.space=null;function zO(e,r){const n={},o={};let a=-1;for(;++a<e.length;)Object.assign(n,e[a].property),Object.assign(o,e[a].normal);return new E1(n,o,r)}function t8(e){return e.toLowerCase()}class ci{constructor(r,n){this.property=r,this.attribute=n}}ci.prototype.space=null,ci.prototype.boolean=!1,ci.prototype.booleanish=!1,ci.prototype.overloadedBoolean=!1,ci.prototype.number=!1,ci.prototype.commaSeparated=!1,ci.prototype.spaceSeparated=!1,ci.prototype.commaOrSpaceSeparated=!1,ci.prototype.mustUseProperty=!1,ci.prototype.defined=!1;let vbe=0;const Vt=Hd(),Mn=Hd(),IO=Hd(),We=Hd(),Lr=Hd(),uf=Hd(),Na=Hd();function Hd(){return 2**++vbe}const r8={__proto__:null,boolean:Vt,booleanish:Mn,commaOrSpaceSeparated:Na,commaSeparated:uf,number:We,overloadedBoolean:IO,spaceSeparated:Lr},n8=Object.keys(r8);class o8 extends ci{constructor(r,n,o,a){let i=-1;if(super(r,n),OO(this,"space",a),typeof o=="number")for(;++i<n8.length;){const s=n8[i];OO(this,n8[i],(o&r8[s])===r8[s])}}}o8.prototype.defined=!0;function OO(e,r,n){n&&(e[r]=n)}const xbe={}.hasOwnProperty;function df(e){const r={},n={};let o;for(o in e.properties)if(xbe.call(e.properties,o)){const a=e.properties[o],i=new o8(o,e.transform(e.attributes||{},o),a,e.space);e.mustUseProperty&&e.mustUseProperty.includes(o)&&(i.mustUseProperty=!0),r[o]=i,n[t8(o)]=o,n[t8(i.attribute)]=o}return new E1(r,n,e.space)}const jO=df({space:"xlink",transform(e,r){return"xlink:"+r.slice(5).toLowerCase()},properties:{xLinkActuate:nu
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
\f\r &/=>`.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 M2e(e,r,n,o){const a=o.schema,i=a.space==="svg"?!1:o.settings.omitOptionalTags;let s=a.space==="svg"?o.settings.closeEmptyElements:o.settings.voids.includes(e.tagName.toLowerCase());const l=[];let c;a.space==="html"&&e.tagName==="svg"&&(o.schema=_1);const u=P2e(o,e.properties),d=o.all(a.space==="html"&&e.tagName==="template"?e.content:e);return o.schema=a,d&&(s=!1),(u||!i||!T2e(e,r,n))&&(l.push("<",e.tagName,u?" "+u:""),s&&(a.space==="svg"||o.settings.closeSelfClosing)&&(c=u.charAt(u.length-1),(!o.settings.tightSelfClosing||c==="/"||c&&c!=='"'&&c!=="'")&&l.push(" "),l.push("/")),l.push(">")),l.push(d),!s&&(!i||!_8(e,r,n))&&l.push("</"+e.tagName+">"),l.join("")}function P2e(e,r){const n=[];let o=-1,a;if(r){for(a in r)if(r[a]!==null&&r[a]!==void 0){const i=z2e(e,a,r[a]);i&&n.push(i)}}for(;++o<n.length;){const i=e.settings.tightAttributes?n[o].charAt(n[o].length-1):void 0;o!==n.length-1&&i!=='"'&&i!=="'"&&(n[o]+=" ")}return n.join("")}function z2e(e,r,n){const o=Q6(e.schema,r),a=e.settings.allowParseErrors&&e.schema.space==="html"?0:1,i=e.settings.allowDangerousCharacters?0:1;let s=e.quote,l;if(o.overloadedBoolean&&(n===o.attribute||n==="")?n=!0:(o.boolean||o.overloadedBoolean)&&(typeof n!="string"||n===o.attribute||n==="")&&(n=!!n),n==null||n===!1||typeof n=="number"&&Number.isNaN(n))return"";const c=gf(o.attribute,Object.assign({},e.settings.characterReferences,{subset:Ex.name[a][i]}));return n===!0||(n=Array.isArray(n)?(o.commaSeparated?SO:AO)(n,{padLeft:!e.settings.tightCommaSeparatedLists}):String(n),e.settings.collapseEmptyAttributes&&!n)?c:(e.settings.preferUnquoted&&(l=gf(n,Object.assign({},e.settings.characterReferences,{attribute:!0,subset:Ex.unquoted[a][i]}))),l!==n&&(e.settings.quoteSmart&&_x(n,s)>_x(n,e.alternative)&&(s=e.alternative),l=s+gf(n,Object.assign({},e.settings.characterReferences,{subset:(s==="'"?Ex.single:Ex.double)[a][i],attribute:!0}))+s),c+(l&&"="+l))}const I2e=["<","&"];function iL(e,r,n,o){return n&&n.type==="element"&&(n.tagName==="script"||n.tagName==="style")?e.value:gf(e.value,Object.assign({},o.settings.characterReferences,{subset:I2e}))}function O2e(e,r,n,o){return o.settings.allowDangerousHtml?e.value:iL(e,r,n,o)}function j2e(e,r,n,o){return o.all(e)}const L2e=a8("type",{invalid:B2e,unknown:F2e,handlers:{comment:u2e,doctype:d2e,element:M2e,raw:O2e,root:j2e,text:iL}});function B2e(e){throw new Error("Expected node, not `"+e+"`")}function F2e(e){const r=e;throw new Error("Cannot compile unknown node `"+r.type+"`")}const H2e={},V2e={},q2e=[];function U2e(e,r){const n=r||H2e,o=n.quote||'"',a=o==='"'?"'":'"';if(o!=='"'&&o!=="'")throw new Error("Invalid quote `"+o+"`, expected `'` or `\"`");return{one:W2e,all:Y2e,settings:{omitOptionalTags:n.omitOptionalTags||!1,allowParseErrors:n.allowParseErrors||!1,allowDangerousCharacters:n.allowDangerousCharacters||!1,quoteSmart:n.quoteSmart||!1,preferUnquoted:n.preferUnquoted||!1,tightAttributes:n.tightAttributes||!1,upperDoctype:n.upperDoctype||!1,tightDoctype:n.tightDoctype||!1,bogusComments:n.bogusComments||!1,tightCommaSeparatedLists:n.tightCommaSeparatedLists||!1,tightSelfClosing:n.tightSelfClosing||!1,collapseEmptyAttributes:n.collapseEmptyAttributes||!1,allowDangerousHtml:n.allowDangerousHtml||!1,voids:n.voids||GO,characterReferences:n.characterReferences||V2e,closeSelfClosing:n.closeSelfClosing||!1,closeEmptyElements:n.closeEmptyElements||!1},schema:n.space==="svg"?_1:lx,quote:o,alternative:a}.one(Array.isArray(e)?{type:"root",children:e}:e,void 0,void 0)}function W2e(e,r,n){return L2e(e,r,n,this)}function Y2e(e){const r=[],n=e&&e.children||q2e;let o=-1;for(;++o<n.length;)r[o]=this.one(n[o],o,e);return r.join("")}function G2e(e){const r=this,n={...r.data("settings"),...e};r.compiler=o;function o(a){return U2e(a,n)}}const Go=mu(/[A-Za-z]/),Po=mu(/[\dA-Za-z]/),X2e=mu(/[#-'*+\--9=?A-Z^-~]/);function Sx(e){return e!==null&&(e<32||e===127)}const S8=mu
`:" ")+i.indentLines(i.containerFlow(o,l.current()),r?cL:Cwe))),u(),c}}function Cwe(e,r,n){return r===0?e:cL(e,r,n)}function cL(e,r,n){return(n?"":" ")+e}const Twe=["autolink","destinationLiteral","destinationRaw","reference","titleQuote","titleApostrophe"];uL.peek=$we;function Awe(){return{canContainEols:["delete"],enter:{strikethrough:Nwe},exit:{strikethrough:Dwe}}}function Rwe(){return{unsafe:[{character:"~",inConstruct:"phrasing",notInConstruct:Twe}],handlers:{delete:uL}}}function Nwe(e){this.enter({type:"delete",children:[]},e)}function Dwe(e){this.exit(e)}function uL(e,r,n,o){const a=n.createTracker(o),i=n.enter("strikethrough");let s=a.move("~~");return s+=n.containerPhrasing(e,{...a.current(),before:s,after:"~"}),s+=a.move("~~"),i(),s}function $we(){return"~"}function Mwe(e){return e.length}function Pwe(e,r){const n=r||{},o=(n.align||[]).concat(),a=n.stringLength||Mwe,i=[],s=[],l=[],c=[];let u=0,d=-1;for(;++d<e.length;){const x=[],w=[];let k=-1;for(e[d].length>u&&(u=e[d].length);++k<e[d].length;){const C=zwe(e[d][k]);if(n.alignDelimiters!==!1){const _=a(C);w[k]=_,(c[k]===void 0||_>c[k])&&(c[k]=_)}x.push(C)}s[d]=x,l[d]=w}let h=-1;if(typeof o=="object"&&"length"in o)for(;++h<u;)i[h]=dL(o[h]);else{const x=dL(o);for(;++h<u;)i[h]=x}h=-1;const f=[],g=[];for(;++h<u;){const x=i[h];let w="",k="";x===99?(w=":",k=":"):x===108?w=":":x===114&&(k=":");let C=n.alignDelimiters===!1?1:Math.max(1,c[h]-w.length-k.length);const _=w+"-".repeat(C)+k;n.alignDelimiters!==!1&&(C=w.length+C+k.length,C>c[h]&&(c[h]=C),g[h]=C),f[h]=_}s.splice(1,0,f),l.splice(1,0,g),d=-1;const b=[];for(;++d<s.length;){const x=s[d],w=l[d];h=-1;const k=[];for(;++h<u;){const C=x[h]||"";let _="",T="";if(n.alignDelimiters!==!1){const A=c[h]-(w[h]||0),R=i[h];R===114?_=" ".repeat(A):R===99?A%2?(_=" ".repeat(A/2+.5),T=" ".repeat(A/2-.5)):(_=" ".repeat(A/2),T=_):T=" ".repeat(A)}n.delimiterStart!==!1&&!h&&k.push("|"),n.padding!==!1&&!(n.alignDelimiters===!1&&C==="")&&(n.delimiterStart!==!1||h)&&k.push(" "),n.alignDelimiters!==!1&&k.push(_),k.push(C),n.alignDelimiters!==!1&&k.push(T),n.padding!==!1&&k.push(" "),(n.delimiterEnd!==!1||h!==u-1)&&k.push("|")}b.push(n.delimiterEnd===!1?k.join("").replace(/ +$/,""):k.join(""))}return b.join(`
`)}function zwe(e){return e==null?"":String(e)}function dL(e){const r=typeof e=="string"?e.codePointAt(0):0;return r===67||r===99?99:r===76||r===108?108:r===82||r===114?114:0}function Iwe(e,r,n,o){const a=n.enter("blockquote"),i=n.createTracker(o);i.move("> "),i.shift(2);const s=n.indentLines(n.containerFlow(e,i.current()),Owe);return a(),s}function Owe(e,r,n){return">"+(n?"":" ")+e}function jwe(e,r){return pL(e,r.inConstruct,!0)&&!pL(e,r.notInConstruct,!1)}function pL(e,r,n){if(typeof r=="string"&&(r=[r]),!r||r.length===0)return n;let o=-1;for(;++o<r.length;)if(e.includes(r[o]))return!0;return!1}function hL(e,r,n,o){let a=-1;for(;++a<n.unsafe.length;)if(n.unsafe[a].character===`
`&&jwe(n.stack,n.unsafe[a]))return/[ \t]/.test(o.before)?"":" ";return`\\
`}function Lwe(e,r){const n=String(e);let o=n.indexOf(r),a=o,i=0,s=0;if(typeof r!="string")throw new TypeError("Expected substring");for(;o!==-1;)o===a?++i>s&&(s=i):i=1,a=o+r.length,o=n.indexOf(r,a);return s}function Bwe(e,r){return!!(r.options.fences===!1&&e.value&&!e.lang&&/[^ \r\n]/.test(e.value)&&!/^[\t ]*(?:[\r\n]|$)|(?:^|[\r\n])[\t ]*$/.test(e.value))}function Fwe(e){const r=e.options.fence||"`";if(r!=="`"&&r!=="~")throw new Error("Cannot serialize code with `"+r+"` for `options.fence`, expected `` ` `` or `~`");return r}function Hwe(e,r,n,o){const a=Fwe(n),i=e.value||"",s=a==="`"?"GraveAccent":"Tilde";if(Bwe(e,n)){const h=n.enter("codeIndented"),f=n.indentLines(i,Vwe);return h(),f}const l=n.createTracker(o),c=a.repeat(Math.max(Lwe(i,a)+1,3)),u=n.enter("codeFenced");let d=l.move(c);if(e.lang){const h=n.enter(`codeFencedLang${s}`);d+=l.move(n.safe(e.lang,{before:d,after:" ",encode:["`"],...l.current()})),h()}if(e.lang&&e.meta){const h=n.enter(`codeFencedMeta${s}`);d+=l.move(" "),d+=l.move(n.safe(e.meta,{before:d,after:`
`,encode:["`"],...l.current()})),h()}return d+=l.move(`
`),i&&(d+=l.move(i+`
`)),d+=l.move(c),u(),d}function Vwe(e,r,n){return(n?"":" ")+e}function R8(e){const r=e.options.quote||'"';if(r!=='"'&&r!=="'")throw new Error("Cannot serialize title with `"+r+"` for `options.quote`, expected `\"`, or `'`");return r}function qwe(e,r,n,o){const a=R8(n),i=a==='"'?"Quote":"Apostrophe",s=n.enter("definition");let l=n.enter("label");const c=n.createTracker(o);let u=c.move("[");return u+=c.move(n.safe(n.associationId(e),{before:u,after:"]",...c.current()})),u+=c.move("]: "),l(),!e.url||/[\0- \u007F]/.test(e.url)?(l=n.enter("destinationLiteral"),u+=c.move("<"),u+=c.move(n.safe(e.url,{before:u,after:">",...c.current()})),u+=c.move(">")):(l=n.enter("destinationRaw"),u+=c.move(n.safe(e.url,{before:u,after:e.title?" ":`
`,...c.current()}))),l(),e.title&&(l=n.enter(`title${i}`),u+=c.move(" "+a),u+=c.move(n.safe(e.title,{before:u,after:a,...c.current()})),u+=c.move(a),l()),s(),u}function Uwe(e){const r=e.options.emphasis||"*";if(r!=="*"&&r!=="_")throw new Error("Cannot serialize emphasis with `"+r+"` for `options.emphasis`, expected `*`, or `_`");return r}function O1(e){return"&#x"+e.toString(16).toUpperCase()+";"}function yf(e){if(e===null||Pr(e)||Wd(e))return 1;if(Cx(e))return 2}function Tx(e,r,n){const o=yf(e),a=yf(r);return o===void 0?a===void 0?n==="_"?{inside:!0,outside:!0}:{inside:!1,outside:!1}:a===1?{inside:!0,outside:!0}:{inside:!1,outside:!0}:o===1?a===void 0?{inside:!1,outside:!1}:a===1?{inside:!0,outside:!0}:{inside:!1,outside:!1}:a===void 0?{inside:!1,outside:!1}:a===1?{inside:!0,outside:!1}:{inside:!1,outside:!1}}fL.peek=Wwe;function fL(e,r,n,o){const a=Uwe(n),i=n.enter("emphasis"),s=n.createTracker(o),l=s.move(a);let c=s.move(n.containerPhrasing(e,{after:a,before:l,...s.current()}));const u=c.charCodeAt(0),d=Tx(o.before.charCodeAt(o.before.length-1),u,a);d.inside&&(c=O1(u)+c.slice(1));const h=c.charCodeAt(c.length-1),f=Tx(o.after.charCodeAt(0),h,a);f.inside&&(c=c.slice(0,-1)+O1(h));const g=s.move(a);return i(),n.attentionEncodeSurroundingInfo={after:f.outside,before:d.outside},l+c+g}function Wwe(e,r,n){return n.options.emphasis||"*"}const Ywe={};function Ax(e,r){const n=r||Ywe,o=typeof n.includeImageAlt=="boolean"?n.includeImageAlt:!0,a=typeof n.includeHtml=="boolean"?n.includeHtml:!0;return mL(e,o,a)}function mL(e,r,n){if(Gwe(e)){if("value"in e)return e.type==="html"&&!n?"":e.value;if(r&&"alt"in e&&e.alt)return e.alt;if("children"in e)return gL(e.children,r,n)}return Array.isArray(e)?gL(e,r,n):""}function gL(e,r,n){const o=[];let a=-1;for(;++a<e.length;)o[a]=mL(e[a],r,n);return o.join("")}function Gwe(e){return!!(e&&typeof e=="object")}function Xwe(e,r){let n=!1;return v8(e,function(o){if("value"in o&&/\r?\n|\r/.test(o.value)||o.type==="break")return n=!0,b8}),!!((!e.depth||e.depth<3)&&Ax(e)&&(r.options.setext||n))}function Kwe(e,r,n,o){const a=Math.max(Math.min(6,e.depth||1),1),i=n.createTracker(o);if(Xwe(e,n)){const d=n.enter("headingSetext"),h=n.enter("phrasing"),f=n.containerPhrasing(e,{...i.current(),before:`
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
`,after:`
`});return h(),d(),f+`
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
`+(a===1?"=":"-").repeat(f.length-(Math.max(f.lastIndexOf("\r"),f.lastIndexOf(`
`))+1))}const s="#".repeat(a),l=n.enter("headingAtx"),c=n.enter("phrasing");i.move(s+" ");let u=n.containerPhrasing(e,{before:"# ",after:`
`,...i.current()});return/^[\t ]/.test(u)&&(u=O1(u.charCodeAt(0))+u.slice(1)),u=u?s+" "+u:s,n.options.closeAtx&&(u+=" "+s),c(),l(),u}yL.peek=Zwe;function yL(e){return e.value||""}function Zwe(){return"<"}bL.peek=Qwe;function bL(e,r,n,o){const a=R8(n),i=a==='"'?"Quote":"Apostrophe",s=n.enter("image");let l=n.enter("label");const c=n.createTracker(o);let u=c.move("![");return u+=c.move(n.safe(e.alt,{before:u,after:"]",...c.current()})),u+=c.move("]("),l(),!e.url&&e.title||/[\0- \u007F]/.test(e.url)?(l=n.enter("destinationLiteral"),u+=c.move("<"),u+=c.move(n.safe(e.url,{before:u,after:">",...c.current()})),u+=c.move(">")):(l=n.enter("destinationRaw"),u+=c.move(n.safe(e.url,{before:u,after:e.title?" ":")",...c.current()}))),l(),e.title&&(l=n.enter(`title${i}`),u+=c.move(" "+a),u+=c.move(n.safe(e.title,{before:u,after:a,...c.current()})),u+=c.move(a),l()),u+=c.move(")"),s(),u}function Qwe(){return"!"}vL.peek=Jwe;function vL(e,r,n,o){const a=e.referenceType,i=n.enter("imageReference");let s=n.enter("label");const l=n.createTracker(o);let c=l.move("![");const u=n.safe(e.alt,{before:c,after:"]",...l.current()});c+=l.move(u+"]["),s();const d=n.stack;n.stack=[],s=n.enter("reference");const h=n.safe(n.associationId(e),{before:c,after:"]",...l.current()});return s(),n.stack=d,i(),a==="full"||!u||u!==h?c+=l.move(h+"]"):a==="shortcut"?c=c.slice(0,-1):c+=l.move("]"),c}function Jwe(){return"!"}xL.peek=e4e;function xL(e,r,n){let o=e.value||"",a="`",i=-1;for(;new RegExp("(^|[^`])"+a+"([^`]|$)").test(o);)a+="`";for(/[^ \r\n]/.test(o)&&(/^[ \r\n]/.test(o)&&/[ \r\n]$/.test(o)||/^`|`$/.test(o))&&(o=" "+o+" ");++i<n.unsafe.length;){const s=n.unsafe[i],l=n.compilePattern(s);let c;if(s.atBreak)for(;c=l.exec(o);){let u=c.index;o.charCodeAt(u)===10&&o.charCodeAt(u-1)===13&&u--,o=o.slice(0,u)+" "+o.slice(c.index+1)}}return a+o+a}function e4e(){return"`"}function wL(e,r){const n=Ax(e);return!!(!r.options.resourceLink&&e.url&&!e.title&&e.children&&e.children.length===1&&e.children[0].type==="text"&&(n===e.url||"mailto:"+n===e.url)&&/^[a-z][a-z+.-]+:/i.test(e.url)&&!/[\0- <>\u007F]/.test(e.url))}kL.peek=t4e;function kL(e,r,n,o){const a=R8(n),i=a==='"'?"Quote":"Apostrophe",s=n.createTracker(o);let l,c;if(wL(e,n)){const d=n.stack;n.stack=[],l=n.enter("autolink");let h=s.move("<");return h+=s.move(n.containerPhrasing(e,{before:h,after:">",...s.current()})),h+=s.move(">"),l(),n.stack=d,h}l=n.enter("link"),c=n.enter("label");let u=s.move("[");return u+=s.move(n.containerPhrasing(e,{before:u,after:"](",...s.current()})),u+=s.move("]("),c(),!e.url&&e.title||/[\0- \u007F]/.test(e.url)?(c=n.enter("destinationLiteral"),u+=s.move("<"),u+=s.move(n.safe(e.url,{before:u,after:">",...s.current()})),u+=s.move(">")):(c=n.enter("destinationRaw"),u+=s.move(n.safe(e.url,{before:u,after:e.title?" ":")",...s.current()}))),c(),e.title&&(c=n.enter(`title${i}`),u+=s.move(" "+a),u+=s.move(n.safe(e.title,{before:u,after:a,...s.current()})),u+=s.move(a),c()),u+=s.move(")"),l(),u}function t4e(e,r,n){return wL(e,n)?"<":"["}_L.peek=r4e;function _L(e,r,n,o){const a=e.referenceType,i=n.enter("linkReference");let s=n.enter("label");const l=n.createTracker(o);let c=l.move("[");const u=n.containerPhrasing(e,{before:c,after:"]",...l.current()});c+=l.move(u+"]["),s();const d=n.stack;n.stack=[],s=n.enter("reference");const h=n.safe(n.associationId(e),{before:c,after:"]",...l.current()});return s(),n.stack=d,i(),a==="full"||!u||u!==h?c+=l.move(h+"]"):a==="shortcut"?c=c.slice(0,-1):c+=l.move("]"),c}function r4e(){return"["}function N8(e){const r=e.options.bullet||"*";if(r!=="*"&&r!=="+"&&r!=="-")throw new Error("Cannot serialize items with `"+r+"` for `options.bullet`, expected `*`, `+`, or `-`");return r}function n4e(e){const r=N8(e),n=e.options.bulletOther;if(!n)return r==="*"?"-":"*";if(n!=="*"&&n!=="+"&&n!=="-")throw new Error("Cannot serialize items with `"+n+"` for `options.bulletOther`, expected `*`, `+`, or `-`");if(n===r)throw new Error("Expected `bullet` (`"+r+"`) and `bulletOther` (`"+n+"`) to be different");return n}function o4e(e){const r=e.options.bulletOrdered||".";if(r!=="."
`,Nfr:"𝔑",NoBreak:"",NonBreakingSpace:" ",Nopf:"",Not:"⫬",NotCongruent:"≢",NotCupCap:"≭",NotDoubleVerticalBar:"∦",NotElement:"∉",NotEqual:"≠",NotEqualTilde:"≂̸",NotExists:"∄",NotGreater:"≯",NotGreaterEqual:"≱",NotGreaterFullEqual:"≧̸",NotGreaterGreater:"≫̸",NotGreaterLess:"≹",NotGreaterSlantEqual:"⩾̸",NotGreaterTilde:"≵",NotHumpDownHump:"≎̸",NotHumpEqual:"≏̸",NotLeftTriangle:"⋪",NotLeftTriangleBar:"⧏̸",NotLeftTriangleEqual:"⋬",NotLess:"≮",NotLessEqual:"≰",NotLessGreater:"≸",NotLessLess:"≪̸",NotLessSlantEqual:"⩽̸",NotLessTilde:"≴",NotNestedGreaterGreater:"⪢̸",NotNestedLessLess:"⪡̸",NotPrecedes:"⊀",NotPrecedesEqual:"⪯̸",NotPrecedesSlantEqual:"⋠",NotReverseElement:"∌",NotRightTriangle:"⋫",NotRightTriangleBar:"⧐̸",NotRightTriangleEqual:"⋭",NotSquareSubset:"⊏̸",NotSquareSubsetEqual:"⋢",NotSquareSuperset:"⊐̸",NotSquareSupersetEqual:"⋣",NotSubset:"⊂⃒",NotSubsetEqual:"⊈",NotSucceeds:"⊁",NotSucceedsEqual:"⪰̸",NotSucceedsSlantEqual:"⋡",NotSucceedsTilde:"≿̸",NotSuperset:"⊃⃒",NotSupersetEqual:"⊉",NotTilde:"≁",NotTildeEqual:"≄",NotTildeFullEqual:"≇",NotTildeTilde:"≉",NotVerticalBar:"∤",Nscr:"𝒩",Ntilde:"Ñ",Nu:"Ν",OElig:"Œ",Oacute:"Ó",Ocirc:"Ô",Ocy:"О",Odblac:"Ő",Ofr:"𝔒",Ograve:"Ò",Omacr:"Ō",Omega:"Ω",Omicron:"Ο",Oopf:"𝕆",OpenCurlyDoubleQuote:"“",OpenCurlyQuote:"",Or:"⩔",Oscr:"𝒪",Oslash:"Ø",Otilde:"Õ",Otimes:"⨷",Ouml:"Ö",OverBar:"‾",OverBrace:"⏞",OverBracket:"⎴",OverParenthesis:"⏜",PartialD:"∂",Pcy:"П",Pfr:"𝔓",Phi:"Φ",Pi:"Π",PlusMinus:"±",Poincareplane:"",Popf:"",Pr:"⪻",Precedes:"≺",PrecedesEqual:"⪯",PrecedesSlantEqual:"≼",PrecedesTilde:"≾",Prime:"″",Product:"∏",Proportion:"∷",Proportional:"∝",Pscr:"𝒫",Psi:"Ψ",QUOT:'"',Qfr:"𝔔",Qopf:"",Qscr:"𝒬",RBarr:"⤐",REG:"®",Racute:"Ŕ",Rang:"⟫",Rarr:"↠",Rarrtl:"⤖",Rcaron:"Ř",Rcedil:"Ŗ",Rcy:"Р",Re:"",ReverseElement:"∋",ReverseEquilibrium:"⇋",ReverseUpEquilibrium:"⥯",Rfr:"",Rho:"Ρ",RightAngleBracket:"⟩",RightArrow:"→",RightArrowBar:"⇥",RightArrowLeftArrow:"⇄",RightCeiling:"⌉",RightDoubleBracket:"⟧",RightDownTeeVector:"⥝",RightDownVector:"⇂",RightDownVectorBar:"⥕",RightFloor:"⌋",RightTee:"⊢",RightTeeArrow:"↦",RightTeeVector:"⥛",RightTriangle:"⊳",RightTriangleBar:"⧐",RightTriangleEqual:"⊵",RightUpDownVector:"⥏",RightUpTeeVector:"⥜",RightUpVector:"↾",RightUpVectorBar:"⥔",RightVector:"⇀",RightVectorBar:"⥓",Rightarrow:"⇒",Ropf:"",RoundImplies:"⥰",Rrightarrow:"⇛",Rscr:"",Rsh:"↱",RuleDelayed:"⧴",SHCHcy:"Щ",SHcy:"Ш",SOFTcy:"Ь",Sacute:"Ś",Sc:"⪼",Scaron:"Š",Scedil:"Ş",Scirc:"Ŝ",Scy:"С",Sfr:"𝔖",ShortDownArrow:"↓",ShortLeftArrow:"←",ShortRightArrow:"→",ShortUpArrow:"↑",Sigma:"Σ",SmallCircle:"∘",Sopf:"𝕊",Sqrt:"√",Square:"□",SquareIntersection:"⊓",SquareSubset:"⊏",SquareSubsetEqual:"⊑",SquareSuperset:"⊐",SquareSupersetEqual:"⊒",SquareUnion:"⊔",Sscr:"𝒮",Star:"⋆",Sub:"⋐",Subset:"⋐",SubsetEqual:"⊆",Succeeds:"≻",SucceedsEqual:"⪰",SucceedsSlantEqual:"≽",SucceedsTilde:"≿",SuchThat:"∋",Sum:"∑",Sup:"⋑",Superset:"⊃",SupersetEqual:"⊇",Supset:"⋑",THORN:"Þ",TRADE:"™",TSHcy:"Ћ",TScy:"Ц",Tab:" ",Tau:"Τ",Tcaron:"Ť",Tcedil:"Ţ",Tcy:"Т",Tfr:"𝔗",Therefore:"∴",Theta:"Θ",ThickSpace:"",ThinSpace:"",Tilde:"",TildeEqual:"≃",TildeFullEqual:"≅",TildeTilde:"≈",Topf:"𝕋",TripleDot:"⃛",Tscr:"𝒯",Tstrok:"Ŧ",Uacute:"Ú",Uarr:"↟",Uarrocir:"⥉",Ubrcy:"Ў",Ubreve:"Ŭ",Ucirc:"Û",Ucy:"У",Udblac:"Ű",Ufr:"𝔘",Ugrave:"Ù",Umacr:"Ū",UnderBar:"_",UnderBrace:"⏟",UnderBracket:"⎵",UnderParenthesis:"⏝",Union:"",UnionPlus:"⊎",Uogon:"Ų",Uopf:"𝕌",UpArrow:"↑",UpArrowBar:"⤒",UpArrowDownArrow:"⇅",UpDownArrow:"↕",UpEquilibrium:"⥮",UpTee:"⊥",UpTeeArrow:"↥",Uparrow:"⇑",Updownarrow:"⇕",UpperLeftArrow:"↖",UpperRightArrow:"↗",Upsi:"ϒ",Upsilon:"Υ",Uring:"Ů",Uscr:"𝒰",Utilde:"Ũ",Uuml:"Ü",VDash:"⊫",Vbar
`,inConstruct:"tableCell"},{atBreak:!0,character:"|",after:"[ :-]"},{character:"|",inConstruct:"tableCell"},{atBreak:!0,character:":",after:"-"},{atBreak:!0,character:"-",after:"[:|-]"}],handlers:{inlineCode:f,table:s,tableCell:c,tableRow:l}};function s(g,b,x,w){return u(d(g,x,w),g.align)}function l(g,b,x,w){const k=h(g,x,w),C=u([k]);return C.slice(0,C.indexOf(`
`))}function c(g,b,x,w){const k=x.enter("tableCell"),C=x.enter("phrasing"),_=x.containerPhrasing(g,{...w,before:i,after:i});return C(),k(),_}function u(g,b){return Pwe(g,{align:b,alignDelimiters:o,padding:n,stringLength:a})}function d(g,b,x){const w=g.children;let k=-1;const C=[],_=b.enter("table");for(;++k<w.length;)C[k]=h(w[k],b,x);return _(),C}function h(g,b,x){const w=g.children;let k=-1;const C=[],_=b.enter("tableRow");for(;++k<w.length;)C[k]=c(w[k],g,b,x);return _(),C}function f(g,b,x){let w=CL.inlineCode(g,b,x);return x.stack.includes("tableCell")&&(w=w.replace(/\|/g,"\\$&")),w}}function T4e(){return{exit:{taskListCheckValueChecked:NL,taskListCheckValueUnchecked:NL,paragraph:R4e}}}function A4e(){return{unsafe:[{atBreak:!0,character:"-",after:"[:|-]"}],handlers:{listItem:N4e}}}function NL(e){const r=this.stack[this.stack.length-2];r.type,r.checked=e.type==="taskListCheckValueChecked"}function R4e(e){const r=this.stack[this.stack.length-2];if(r&&r.type==="listItem"&&typeof r.checked=="boolean"){const n=this.stack[this.stack.length-1];n.type;const o=n.children[0];if(o&&o.type==="text"){const a=r.children;let i=-1,s;for(;++i<a.length;){const l=a[i];if(l.type==="paragraph"){s=l;break}}s===n&&(o.value=o.value.slice(1),o.value.length===0?n.children.shift():n.position&&o.position&&typeof o.position.start.offset=="number"&&(o.position.start.column++,o.position.start.offset++,n.position.start=Object.assign({},o.position.start)))}}this.exit(e)}function N4e(e,r,n,o){const a=e.children[0],i=typeof e.checked=="boolean"&&a&&a.type==="paragraph",s="["+(e.checked?"x":" ")+"] ",l=n.createTracker(o);i&&l.move(s);let c=CL.listItem(e,r,n,{...o,...l.current()});return i&&(c=c.replace(/^(?:[*+-]|\d+\.)([\r\n]| {1,3})/,u)),c;function u(d){return d+s}}function D4e(){return[nwe(),Ewe(),Awe(),x4e(),T4e()]}function $4e(e){return{extensions:[owe(),Swe(e),Rwe(),C4e(e),A4e()]}}function Da(e,r,n,o){const a=e.length;let i=0,s;if(r<0?r=-r>a?0:a+r:r=r>a?a:r,n=n>0?n:0,o.length<1e4)s=Array.from(o),s.unshift(r,n),e.splice(...s);else for(n&&e.splice(r,n);i<o.length;)s=o.slice(i,i+1e4),s.unshift(r,0),e.splice(...s),i+=1e4,r+=1e4}function di(e,r){return e.length>0?(Da(e,e.length,0,r),e):r}const DL={}.hasOwnProperty;function $L(e){const r={};let n=-1;for(;++n<e.length;)M4e(r,e[n]);return r}function M4e(e,r){let n;for(n in r){const a=(DL.call(e,n)?e[n]:void 0)||(e[n]={}),i=r[n];let s;if(i)for(s in i){DL.call(a,s)||(a[s]=[]);const l=i[s];P4e(a[s],Array.isArray(l)?l:l?[l]:[])}}}function P4e(e,r){let n=-1;const o=[];for(;++n<r.length;)(r[n].add==="after"?e:o).push(r[n]);Da(e,0,0,o)}const z4e={tokenize:F4e,partial:!0},ML={tokenize:H4e,partial:!0},PL={tokenize:V4e,partial:!0},zL={tokenize:q4e,partial:!0},I4e={tokenize:U4e,partial:!0},IL={name:"wwwAutolink",tokenize:L4e,previous:jL},OL={name:"protocolAutolink",tokenize:B4e,previous:LL},nc={name:"emailAutolink",tokenize:j4e,previous:BL},ol={};function O4e(){return{text:ol}}let Yd=48;for(;Yd<123;)ol[Yd]=nc,Yd++,Yd===58?Yd=65:Yd===91&&(Yd=97);ol[43]=nc,ol[45]=nc,ol[46]=nc,ol[95]=nc,ol[72]=[nc,OL],ol[104]=[nc,OL],ol[87]=[nc,IL],ol[119]=[nc,IL];function j4e(e,r,n){const o=this;let a,i;return s;function s(h){return!M8(h)||!BL.call(o,o.previous)||P8(o.events)?n(h):(e.enter("literalAutolink"),e.enter("literalAutolinkEmail"),l(h))}function l(h){return M8(h)?(e.consume(h),l):h===64?(e.consume(h),c):n(h)}function c(h){return h===46?e.check(I4e,d,u)(h):h===45||h===95||Po(h)?(i=!0,e.consume(h),c):d(h)}function u(h){return e.consume(h),a=!0,c}function d(h){return i&&a&&Go(o.previous)?(e.exit("literalAutolinkEmail"),e.exit("literalAutolink"),r(h)):n(h)}}function L4e(e,r,n){const o=this;return a;function a(s){return s!==87&&s!==119||!jL.call(o,o.previous)||P8(o.events)?n(s):(e.enter("literalAutolink"),e.enter("literalAutolinkWww"),e.check(z4e,e.attempt(ML,e.attempt(PL,i),n),n)(s))}function i(s){return e.exit("literalAutolinkWww"),e.exit("literalAutolink"),r(s)}}function B4e(e,r,n){const o=this;let a="",i=!1;return s;function s(h){return(h===72||h===104)&&LL.call(o,o.previous)&&!P8(o.events)?(e.enter("literalAutolink"),e.enter(
`;break}case-3:{s=`\r
`;break}case-2:{s=r?" ":" ";break}case-1:{if(!r&&a)continue;s=" ";break}default:s=String.fromCharCode(i)}a=i===-2,o.push(s)}return o.join("")}function U5e(e){const o={constructs:$L([F5e,...(e||{}).extensions||[]]),content:a(N5e),defined:[],document:a($5e),flow:a(z5e),lazy:{},string:a(j5e),text:a(L5e)};return o;function a(i){return s;function s(l){return H5e(o,i,l)}}}function W5e(e){for(;!YL(e););return e}const nB=/[\0\t\n\r]/g;function Y5e(){let e=1,r="",n=!0,o;return a;function a(i,s,l){const c=[];let u,d,h,f,g;for(i=r+(typeof i=="string"?i.toString():new TextDecoder(s||void 0).decode(i)),h=0,r="",n&&(i.charCodeAt(0)===65279&&h++,n=void 0);h<i.length;){if(nB.lastIndex=h,u=nB.exec(i),f=u&&u.index!==void 0?u.index:i.length,g=i.charCodeAt(f),!u){r=i.slice(h);break}if(g===10&&h===f&&o)c.push(-3),o=void 0;else switch(o&&(c.push(-5),o=void 0),h<f&&(c.push(i.slice(h,f)),e+=f-h),g){case 0:{c.push(65533),e++;break}case 9:{for(d=Math.ceil(e/4)*4,c.push(-2);e++<d;)c.push(-1);break}case 10:{c.push(-4),e=1;break}default:o=!0,e=1}h=f+1}return l&&(o&&c.push(-5),r&&c.push(r),c.push(null)),c}}function F1(e){return!e||typeof e!="object"?"":"position"in e||"type"in e?oB(e.position):"start"in e||"end"in e?oB(e):"line"in e||"column"in e?L8(e):""}function L8(e){return aB(e&&e.line)+":"+aB(e&&e.column)}function oB(e){return L8(e&&e.start)+"-"+L8(e&&e.end)}function aB(e){return e&&typeof e=="number"?e:1}const iB={}.hasOwnProperty;function sB(e,r,n){return typeof r!="string"&&(n=r,r=void 0),G5e(n)(W5e(U5e(n).document().write(Y5e()(e,r,!0))))}function G5e(e){const r={transforms:[],canContainEols:["emphasis","fragment","heading","paragraph","strong"],enter:{autolink:i(Qe),autolinkProtocol:M,autolinkEmail:M,atxHeading:i(Ie),blockQuote:i(ge),characterEscape:M,characterReference:M,codeFenced:i(De),codeFencedFenceInfo:s,codeFencedFenceMeta:s,codeIndented:i(De,s),codeText:i(he,s),codeTextData:M,data:M,codeFlowValue:M,definition:i(me),definitionDestinationString:s,definitionLabelString:s,definitionTitleString:s,emphasis:i(Te),hardBreakEscape:i(Ze),hardBreakTrailing:i(Ze),htmlFlow:i(rt,s),htmlFlowData:M,htmlText:i(rt,s),htmlTextData:M,image:i(Rt),label:s,link:i(Qe),listItem:i(Ke),listItemValue:f,listOrdered:i(Pt,h),listUnordered:i(Pt),paragraph:i(Ge),reference:j,referenceString:s,resourceDestinationString:s,resourceTitleString:s,setextHeading:i(Ie),strong:i(ct),thematicBreak:i(Ir)},exit:{atxHeading:c(),atxHeadingSequence:A,autolink:c(),autolinkEmail:re,autolinkProtocol:ne,blockQuote:c(),characterEscapeValue:O,characterReferenceMarkerHexadecimal:Q,characterReferenceMarkerNumeric:Q,characterReferenceValue:J,characterReference:ie,codeFenced:c(w),codeFencedFence:x,codeFencedFenceInfo:g,codeFencedFenceMeta:b,codeFlowValue:O,codeIndented:c(k),codeText:c(V),codeTextData:O,data:O,definition:c(),definitionDestinationString:T,definitionLabelString:C,definitionTitleString:_,emphasis:c(),hardBreakEscape:c(L),hardBreakTrailing:c(L),htmlFlow:c(U),htmlFlowData:O,htmlText:c(P),htmlTextData:O,image:c(H),label:Z,labelText:q,lineEnding:F,link:c(I),listItem:c(),listOrdered:c(),listUnordered:c(),paragraph:c(),referenceString:Y,resourceDestinationString:W,resourceTitleString:G,resource:K,setextHeading:c(N),setextHeadingLineSequence:D,setextHeadingText:R,strong:c(),thematicBreak:c()}};lB(r,(e||{}).mdastExtensions||[]);const n={};return o;function o(Ee){let Se={type:"root",children:[]};const it={stack:[Se],tokenStack:[],config:r,enter:l,exit:u,buffer:s,resume:d,data:n},xt=[];let zt=-1;for(;++zt<Ee.length;)if(Ee[zt][1].type==="listOrdered"||Ee[zt][1].type==="listUnordered")if(Ee[zt][0]==="enter")xt.push(zt);else{const Fr=xt.pop();zt=a(Ee,Fr,zt)}for(zt=-1;++zt<Ee.length;){const Fr=r[Ee[zt][0]];iB.call(Fr,Ee[zt][1].type)&&Fr[Ee[zt][1].type].call(Object.assign({sliceSerialize:Ee[zt][2].sliceSerialize},it),Ee[zt][1])}if(it.tokenStack.length>0){const Fr=it.tokenStack[it.tokenStack.length-1];(Fr[1]||cB).call(it,void 0,Fr[0])}for(Se.position={start:gu(Ee.length>0?Ee[0][1].start:{line:1,column:1,offset:0}),end:gu(Ee.length>0?Ee[Ee.length-2][1].end:{line:1,column:1,offset:0})},zt=-1;++
`}]}function J5e(e,r){const n=r.value?r.value+`
`:"",o={};r.lang&&(o.className=["language-"+r.lang]);let a={type:"element",tagName:"code",properties:o,children:[{type:"text",value:n}]};return r.meta&&(a.data={meta:r.meta}),e.patch(r,a),a=e.applyData(r,a),a={type:"element",tagName:"pre",properties:{},children:[a]},e.patch(r,a),a}function e_e(e,r){const n={type:"element",tagName:"del",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}function t_e(e,r){const n={type:"element",tagName:"em",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}function r_e(e,r){const n=typeof e.options.clobberPrefix=="string"?e.options.clobberPrefix:"user-content-",o=String(r.identifier).toUpperCase(),a=bf(o.toLowerCase()),i=e.footnoteOrder.indexOf(o);let s,l=e.footnoteCounts.get(o);l===void 0?(l=0,e.footnoteOrder.push(o),s=e.footnoteOrder.length):s=i+1,l+=1,e.footnoteCounts.set(o,l);const c={type:"element",tagName:"a",properties:{href:"#"+n+"fn-"+a,id:n+"fnref-"+a+(l>1?"-"+l:""),dataFootnoteRef:!0,ariaDescribedBy:["footnote-label"]},children:[{type:"text",value:String(s)}]};e.patch(r,c);const u={type:"element",tagName:"sup",properties:{},children:[c]};return e.patch(r,u),e.applyData(r,u)}function n_e(e,r){const n={type:"element",tagName:"h"+r.depth,properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}function o_e(e,r){if(e.options.allowDangerousHtml){const n={type:"raw",value:r.value};return e.patch(r,n),e.applyData(r,n)}}function uB(e,r){const n=r.referenceType;let o="]";if(n==="collapsed"?o+="[]":n==="full"&&(o+="["+(r.label||r.identifier)+"]"),r.type==="imageReference")return[{type:"text",value:"!["+r.alt+o}];const a=e.all(r),i=a[0];i&&i.type==="text"?i.value="["+i.value:a.unshift({type:"text",value:"["});const s=a[a.length-1];return s&&s.type==="text"?s.value+=o:a.push({type:"text",value:o}),a}function a_e(e,r){const n=String(r.identifier).toUpperCase(),o=e.definitionById.get(n);if(!o)return uB(e,r);const a={src:bf(o.url||""),alt:r.alt};o.title!==null&&o.title!==void 0&&(a.title=o.title);const i={type:"element",tagName:"img",properties:a,children:[]};return e.patch(r,i),e.applyData(r,i)}function i_e(e,r){const n={src:bf(r.url)};r.alt!==null&&r.alt!==void 0&&(n.alt=r.alt),r.title!==null&&r.title!==void 0&&(n.title=r.title);const o={type:"element",tagName:"img",properties:n,children:[]};return e.patch(r,o),e.applyData(r,o)}function s_e(e,r){const n={type:"text",value:r.value.replace(/\r?\n|\r/g," ")};e.patch(r,n);const o={type:"element",tagName:"code",properties:{},children:[n]};return e.patch(r,o),e.applyData(r,o)}function l_e(e,r){const n=String(r.identifier).toUpperCase(),o=e.definitionById.get(n);if(!o)return uB(e,r);const a={href:bf(o.url||"")};o.title!==null&&o.title!==void 0&&(a.title=o.title);const i={type:"element",tagName:"a",properties:a,children:e.all(r)};return e.patch(r,i),e.applyData(r,i)}function c_e(e,r){const n={href:bf(r.url)};r.title!==null&&r.title!==void 0&&(n.title=r.title);const o={type:"element",tagName:"a",properties:n,children:e.all(r)};return e.patch(r,o),e.applyData(r,o)}function u_e(e,r,n){const o=e.all(r),a=n?d_e(n):dB(r),i={},s=[];if(typeof r.checked=="boolean"){const d=o[0];let h;d&&d.type==="element"&&d.tagName==="p"?h=d:(h={type:"element",tagName:"p",properties:{},children:[]},o.unshift(h)),h.children.length>0&&h.children.unshift({type:"text",value:" "}),h.children.unshift({type:"element",tagName:"input",properties:{type:"checkbox",checked:r.checked,disabled:!0},children:[]}),i.className=["task-list-item"]}let l=-1;for(;++l<o.length;){const d=o[l];(a||l!==0||d.type!=="element"||d.tagName!=="p")&&s.push({type:"text",value:`
`}),d.type==="element"&&d.tagName==="p"&&!a?s.push(...d.children):s.push(d)}const c=o[o.length-1];c&&(a||c.type!=="element"||c.tagName!=="p")&&s.push({type:"text",value:`
`});const u={type:"element",tagName:"li",properties:i,children:s};return e.patch(r,u),e.applyData(r,u)}function d_e(e){let r=!1;if(e.type==="list"){r=e.spread||!1;const n=e.children;let o=-1;for(;!r&&++o<n.length;)r=dB(n[o])}return r}function dB(e){const r=e.spread;return r??e.children.length>1}function p_e(e,r){const n={},o=e.all(r);let a=-1;for(typeof r.start=="number"&&r.start!==1&&(n.start=r.start);++a<o.length;){const s=o[a];if(s.type==="element"&&s.tagName==="li"&&s.properties&&Array.isArray(s.properties.className)&&s.properties.className.includes("task-list-item")){n.className=["contains-task-list"];break}}const i={type:"element",tagName:r.ordered?"ol":"ul",properties:n,children:e.wrap(o,!0)};return e.patch(r,i),e.applyData(r,i)}function h_e(e,r){const n={type:"element",tagName:"p",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}function f_e(e,r){const n={type:"root",children:e.wrap(e.all(r))};return e.patch(r,n),e.applyData(r,n)}function m_e(e,r){const n={type:"element",tagName:"strong",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}function g_e(e,r){const n=e.all(r),o=n.shift(),a=[];if(o){const s={type:"element",tagName:"thead",properties:{},children:e.wrap([o],!0)};e.patch(r.children[0],s),a.push(s)}if(n.length>0){const s={type:"element",tagName:"tbody",properties:{},children:e.wrap(n,!0)},l=rc(r.children[1]),c=vx(r.children[r.children.length-1]);l&&c&&(s.position={start:l,end:c}),a.push(s)}const i={type:"element",tagName:"table",properties:{},children:e.wrap(a,!0)};return e.patch(r,i),e.applyData(r,i)}function y_e(e,r,n){const o=n?n.children:void 0,i=(o?o.indexOf(r):1)===0?"th":"td",s=n&&n.type==="table"?n.align:void 0,l=s?s.length:r.children.length;let c=-1;const u=[];for(;++c<l;){const h=r.children[c],f={},g=s?s[c]:void 0;g&&(f.align=g);let b={type:"element",tagName:i,properties:f,children:[]};h&&(b.children=e.all(h),e.patch(h,b),b=e.applyData(h,b)),u.push(b)}const d={type:"element",tagName:"tr",properties:{},children:e.wrap(u,!0)};return e.patch(r,d),e.applyData(r,d)}function b_e(e,r){const n={type:"element",tagName:"td",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}const pB=9,hB=32;function v_e(e){const r=String(e),n=/\r?\n|\r/g;let o=n.exec(r),a=0;const i=[];for(;o;)i.push(fB(r.slice(a,o.index),a>0,!0),o[0]),a=o.index+o[0].length,o=n.exec(r);return i.push(fB(r.slice(a),a>0,!1)),i.join("")}function fB(e,r,n){let o=0,a=e.length;if(r){let i=e.codePointAt(o);for(;i===pB||i===hB;)o++,i=e.codePointAt(o)}if(n){let i=e.codePointAt(a-1);for(;i===pB||i===hB;)a--,i=e.codePointAt(a-1)}return a>o?e.slice(o,a):""}function x_e(e,r){const n={type:"text",value:v_e(String(r.value))};return e.patch(r,n),e.applyData(r,n)}function w_e(e,r){const n={type:"element",tagName:"hr",properties:{},children:[]};return e.patch(r,n),e.applyData(r,n)}const k_e={blockquote:Z5e,break:Q5e,code:J5e,delete:e_e,emphasis:t_e,footnoteReference:r_e,heading:n_e,html:o_e,imageReference:a_e,image:i_e,inlineCode:s_e,linkReference:l_e,link:c_e,listItem:u_e,list:p_e,paragraph:h_e,root:f_e,strong:m_e,table:g_e,tableCell:b_e,tableRow:y_e,text:x_e,thematicBreak:w_e,toml:$x,yaml:$x,definition:$x,footnoteDefinition:$x};function $x(){}function __e(e,r){const n=[{type:"text",value:"↩"}];return r>1&&n.push({type:"element",tagName:"sup",properties:{},children:[{type:"text",value:String(r)}]}),n}function E_e(e,r){return"Back to reference "+(e+1)+(r>1?"-"+r:"")}function S_e(e){const r=typeof e.options.clobberPrefix=="string"?e.options.clobberPrefix:"user-content-",n=e.options.footnoteBackContent||__e,o=e.options.footnoteBackLabel||E_e,a=e.options.footnoteLabel||"Footnotes",i=e.options.footnoteLabelTagName||"h2",s=e.options.footnoteLabelProperties||{className:["sr-only"]},l=[];let c=-1;for(;++c<e.footnoteOrder.length;){const u=e.footnoteById.get(e.footnoteOrder[c]);if(!u)continue;const d=e.all(u),h=String(u.identifier).toUpperCase(),f=bf(h.toLowerCase());let g=0;const b=[],x=e.footnoteCounts.get(h);for(;x!==void 0&&++g<=x;){b.length>0&&b.push({type:"text",value:" "});let C=typeof n=="string"?n
`},{type:"element",tagName:"ol",properties:{},children:e.wrap(l,!0)},{type:"text",value:`
`}]}}const B8={}.hasOwnProperty,C_e={};function T_e(e,r){const n=r||C_e,o=new Map,a=new Map,i=new Map,s={...k_e,...n.handlers},l={all:u,applyData:R_e,definitionById:o,footnoteById:a,footnoteCounts:i,footnoteOrder:[],handlers:s,one:c,options:n,patch:A_e,wrap:D_e};return v8(e,function(d){if(d.type==="definition"||d.type==="footnoteDefinition"){const h=d.type==="definition"?o:a,f=String(d.identifier).toUpperCase();h.has(f)||h.set(f,d)}}),l;function c(d,h){const f=d.type,g=l.handlers[f];if(B8.call(l.handlers,f)&&g)return g(l,d,h);if(l.options.passThrough&&l.options.passThrough.includes(f)){if("children"in d){const{children:x,...w}=d,k=Ld(w);return k.children=l.all(d),k}return Ld(d)}return(l.options.unknownHandler||N_e)(l,d,h)}function u(d){const h=[];if("children"in d){const f=d.children;let g=-1;for(;++g<f.length;){const b=l.one(f[g],d);if(b){if(g&&f[g-1].type==="break"&&(!Array.isArray(b)&&b.type==="text"&&(b.value=mB(b.value)),!Array.isArray(b)&&b.type==="element")){const x=b.children[0];x&&x.type==="text"&&(x.value=mB(x.value))}Array.isArray(b)?h.push(...b):h.push(b)}}}return h}}function A_e(e,r){e.position&&(r.position=jj(e))}function R_e(e,r){let n=r;if(e&&e.data){const o=e.data.hName,a=e.data.hChildren,i=e.data.hProperties;if(typeof o=="string")if(n.type==="element")n.tagName=o;else{const s="children"in n?n.children:[n];n={type:"element",tagName:o,properties:{},children:s}}n.type==="element"&&i&&Object.assign(n.properties,Ld(i)),"children"in n&&n.children&&a!==null&&a!==void 0&&(n.children=a)}return n}function N_e(e,r){const n=r.data||{},o="value"in r&&!(B8.call(n,"hProperties")||B8.call(n,"hChildren"))?{type:"text",value:r.value}:{type:"element",tagName:"div",properties:{},children:e.all(r)};return e.patch(r,o),e.applyData(r,o)}function D_e(e,r){const n=[];let o=-1;for(r&&n.push({type:"text",value:`
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
`});++o<e.length;)o&&n.push({type:"text",value:`
`}),n.push(e[o]);return r&&e.length>0&&n.push({type:"text",value:`
`}),n}function mB(e){let r=0,n=e.charCodeAt(r);for(;n===9||n===32;)r++,n=e.charCodeAt(r);return e.slice(r)}function gB(e,r){const n=T_e(e,r),o=n.one(e,void 0),a=S_e(n),i=Array.isArray(o)?{type:"root",children:o}:o||{type:"root",children:[]};return a&&i.children.push({type:"text",value:`
`},a),i}function $_e(e,r){return e&&"run"in e?async function(n,o){const a=gB(n,{file:o,...r});await e.run(a,o)}:function(n,o){return gB(n,{file:o,...e||r})}}function yB(e){if(e)throw e}var F8,bB;function M_e(){if(bB)return F8;bB=1;var e=Object.prototype.hasOwnProperty,r=Object.prototype.toString,n=Object.defineProperty,o=Object.getOwnPropertyDescriptor,a=function(u){return typeof Array.isArray=="function"?Array.isArray(u):r.call(u)==="[object Array]"},i=function(u){if(!u||r.call(u)!=="[object Object]")return!1;var d=e.call(u,"constructor"),h=u.constructor&&u.constructor.prototype&&e.call(u.constructor.prototype,"isPrototypeOf");if(u.constructor&&!d&&!h)return!1;var f;for(f in u);return typeof f>"u"||e.call(u,f)},s=function(u,d){n&&d.name==="__proto__"?n(u,d.name,{enumerable:!0,configurable:!0,value:d.newValue,writable:!0}):u[d.name]=d.newValue},l=function(u,d){if(d==="__proto__")if(e.call(u,d)){if(o)return o(u,d).value}else return;return u[d]};return F8=function c(){var u,d,h,f,g,b,x=arguments[0],w=1,k=arguments.length,C=!1;for(typeof x=="boolean"&&(C=x,x=arguments[1]||{},w=2),(x==null||typeof x!="object"&&typeof x!="function")&&(x={});w<k;++w)if(u=arguments[w],u!=null)for(d in u)h=l(x,d),f=l(u,d),x!==f&&(C&&f&&(i(f)||(g=a(f)))?(g?(g=!1,b=h&&a(h)?h:[]):b=h&&i(h)?h:{},s(x,{name:d,newValue:c(C,b,f)})):typeof f<"u"&&s(x,{name:d,newValue:f}));return x},F8}var P_e=M_e();const H8=m1(P_e);function V8(e){if(typeof e!="object"||e===null)return!1;const r=Object.getPrototypeOf(e);return(r===null||r===Object.prototype||Object.getPrototypeOf(r)===null)&&!(Symbol.toStringTag in e)&&!(Symbol.iterator in e)}function z_e(){const e=[],r={run:n,use:o};return r;function n(...a){let i=-1;const s=a.pop();if(typeof s!="function")throw new TypeError("Expected function as last argument, not "+s);l(null,...a);function l(c,...u){const d=e[++i];let h=-1;if(c){s(c);return}for(;++h<a.length;)(u[h]===null||u[h]===void 0)&&(u[h]=a[h]);a=u,d?I_e(d,l)(...u):s(null,...u)}}function o(a){if(typeof a!="function")throw new TypeError("Expected `middelware` to be a function, not "+a);return e.push(a),r}}function I_e(e,r){let n;return o;function o(...s){const l=e.length>s.length;let c;l&&s.push(a);try{c=e.apply(this,s)}catch(u){const d=u;if(l&&n)throw d;return a(d)}l||(c&&c.then&&typeof c.then=="function"?c.then(i,a):c instanceof Error?a(c):i(c))}function a(s,...l){n||(n=!0,r(s,...l))}function i(s){a(null,s)}}class sa extends Error{constructor(r,n,o){super(),typeof n=="string"&&(o=n,n=void 0);let a="",i={},s=!1;if(n&&("line"in n&&"column"in n?i={place:n}:"start"in n&&"end"in n?i={place:n}:"type"in n?i={ancestors:[n],place:n.position}:i={...n}),typeof r=="string"?a=r:!i.cause&&r&&(s=!0,a=r.message,i.cause=r),!i.ruleId&&!i.source&&typeof o=="string"){const c=o.indexOf(":");c===-1?i.ruleId=o:(i.source=o.slice(0,c),i.ruleId=o.slice(c+1))}if(!i.place&&i.ancestors&&i.ancestors){const c=i.ancestors[i.ancestors.length-1];c&&(i.place=c.position)}const l=i.place&&"start"in i.place?i.place.start:i.place;this.ancestors=i.ancestors||void 0,this.cause=i.cause||void 0,this.column=l?l.column:void 0,this.fatal=void 0,this.file,this.message=a,this.line=l?l.line:void 0,this.name=F1(i.place)||"1:1",this.place=i.place||void 0,this.reason=this.message,this.ruleId=i.ruleId||void 0,this.source=i.source||void 0,this.stack=s&&i.cause&&typeof i.cause.stack=="string"?i.cause.stack:"",this.actual,this.expected,this.note,this.url}}sa.prototype.file="",sa.prototype.name="",sa.prototype.reason="",sa.prototype.message="",sa.prototype.stack="",sa.prototype.column=void 0,sa.prototype.line=void 0,sa.prototype.ancestors=void 0,sa.prototype.cause=void 0,sa.prototype.fatal=void 0,sa.prototype.place=void 0,sa.prototype.ruleId=void 0,sa.prototype.source=void 0;const al={basename:O_e,dirname:j_e,extname:L_e,join:B_e,sep:"/"};function O_e(e,r){if(r!==void 0&&typeof r!="string")throw new TypeError('"ext" argument must be a string');H1(e);let n=0,o=-1,a=e.length,i;if(r===void 0||r.length===0||r.length>e.length){for(;a--;)if(e.codePointAt(a)===47){if(i){n=a+1;break}}else o<0&&(i=!0,o=a+1);return o<0?"":e.s
`)}reversed(r=!1){if(!r)return new pi(this.target,this.source);const[n]=gE(this.target,this.source,"directed");return n??new pi(this.target,this.source,new Set)}}const JB={asc:(e,r)=>e>r,desc:(e,r)=>e<r};function n8e(e,r){let[n,...o]=r;if(!o8e(n)){let i=yE(...o);return e(n,i)}let a=yE(n,...o);return i=>e(i,a)}function yE(e,r,...n){let o=typeof e=="function"?e:e[0],a=typeof e=="function"?"asc":e[1],{[a]:i}=JB,s=r===void 0?void 0:yE(r,...n);return(l,c)=>{let u=o(l),d=o(c);return i(u,d)?1:i(d,u)?-1:s?.(l,c)??0}}function o8e(e){if(eF(e))return!0;if(typeof e!="object"||!Array.isArray(e))return!1;let[r,n,...o]=e;return eF(r)&&typeof n=="string"&&n in JB&&o.length===0}const eF=e=>typeof e=="function"&&e.length===1;function a8e(...e){return Do(i8e,e,s8e)}const i8e=(e,r)=>e.filter(r),s8e=e=>(r,n,o)=>e(r,n,o)?{done:!1,hasNext:!0,next:r}:sE;function tF(...e){return Do(l8e,e,c8e)}const l8e=(e,r)=>e.flatMap(r),c8e=e=>(r,n,o)=>{let a=e(r,n,o);return Array.isArray(a)?{done:!1,hasNext:!0,hasMany:!0,next:a}:{done:!1,hasNext:!0,next:a}};function bE(...e){return Do(u8e,e)}const u8e=(e,r)=>{let n=Object.create(null);for(let o=0;o<e.length;o++){let a=e[o],i=r(a,o,e);if(i!==void 0){let s=n[i];s===void 0?n[i]=[a]:s.push(a)}}return Object.setPrototypeOf(n,Object.prototype),n};function d8e(e){return typeof e=="number"&&!Number.isNaN(e)}function p8e(...e){return Do(h8e,e)}const h8e=e=>e.at(-1);function vE(...e){return Do(f8e,e)}function f8e(e,r){let n={};for(let[o,a]of Object.entries(e))n[o]=r(a,o,e);return n}function xE(...e){return r=>Kd(r,...e)}function rF(...e){return n8e(m8e,e)}const m8e=(e,r)=>[...e].sort(r);function nF(e,r,n){return typeof r=="number"||r===void 0?o=>o.split(e,r):e.split(r,n)}function Z1(...e){return Do(Object.values,e)}class jx{constructor(r,n){this.$model=r,this.$element=n,this.id=this.$element.id,this._literalId=this.$element.id;const[o,a]=u6e(this.id);o?(this.imported={from:o,fqn:a},this.hierarchyLevel=rx(a)):(this.imported=null,this.hierarchyLevel=rx(this.id))}Aux;id;_literalId;hierarchyLevel;imported;get name(){return g1(this.id)}get parent(){return this.$model.parent(this)}get kind(){return this.$element.kind}get shape(){return this.style.shape}get color(){return this.style.color}get icon(){return this.style.icon??null}get tags(){return yr(this,Symbol.for("tags"),()=>Ox([...this.$element.tags??[],...this.$model.specification.elements[this.$element.kind]?.tags??[]]))}get title(){return this.$element.title}get hasSummary(){return!!this.$element.summary&&!!this.$element.description&&!mE(this.$element.summary,this.$element.description)}get summary(){return or.memoize(this,"summary",xf(this.$element))}get description(){return or.memoize(this,"description",wf(this.$element))}get technology(){return this.$element.technology??null}get links(){return this.$element.links??[]}get defaultView(){return yr(this,Symbol.for("defaultView"),()=>hE(this.scopedViews())??null)}get isRoot(){return this.parent===null}get style(){return yr(this,"style",()=>U1({shape:this.$model.$styles.defaults.shape,color:this.$model.$styles.defaults.color,border:this.$model.$styles.defaults.border,opacity:this.$model.$styles.defaults.opacity,size:this.$model.$styles.defaults.size,padding:this.$model.$styles.defaults.padding,textSize:this.$model.$styles.defaults.text,...this.$element.style}))}isAncestorOf(r){return to(this,r)}isDescendantOf(r){return to(r,this)}ancestors(){return this.$model.ancestors(this)}commonAncestor(r){const n=b1(this.id,r.id);return n?this.$model.element(n):null}children(){return this.$model.children(this)}descendants(r){return r?nO([...this.$model.descendants(this)],r)[Symbol.iterator]():this.$model.descendants(this)}siblings(){return this.$model.siblings(this)}*ascendingSiblings(){yield*this.siblings();for(const r of this.ancestors())yield*r.siblings()}*descendingSiblings(){for(const r of[...this.ancestors()].reverse())yield*r.siblings();yield*this.siblings()}incoming(r="all"){return this.$model.incoming(this,r)}*incomers(r="all"){const n=new Set;for(const o of this.incoming(r))n.has(o.source.id)||(n.add(o.source.id),yield o.sour
`),"View title cannot contain newlines"),e.includes($a)){const r=e.split($a).map(n=>n.trim()).filter(n=>n.length>0);return Kl(r,1)?r:[""]}return[e.trim()]},Lx=e=>wE(e).join($a),g8e=e=>{const r=wE(e);return Kl(r,2)?r.slice(0,-1).join($a):null},kE=e=>e.includes($a)?wE(e).pop()??e:e.trim();class y8e{constructor(r){this.$model=r;const n=this.$deployments=r.$data.deployments,o=Z1(n.elements);for(const a of uu(o)){const i=this.addElement(a);for(const s of i.tags)this.#c.get(s).add(i);i.isInstance()&&this.#r.get(i.element.id).add(i)}for(const a of Z1(n.relations)){const i=this.addRelation(a);for(const s of i.tags)this.#c.get(s).add(i)}}#e=new Map;#i=new Map;#t=new Xn(()=>new Set);#r=new Xn(()=>new Set);#s=new Set;#n=new Map;#l=new Xn(()=>new Set);#a=new Xn(()=>new Set);#o=new Xn(()=>new Set);#c=new Xn(()=>new Set);#u=new Map;$deployments;get $styles(){return this.$model.$styles}element(r){if(r instanceof XB||r instanceof KB)return r;const n=Tr(r);return bt(this.#e.get(n),`Element ${n} not found`)}findElement(r){return this.#e.get(r)??null}node(r){const n=this.element(r);return at(n.isDeploymentNode(),`Element ${n.id} is not a deployment node`),n}findNode(r){const n=this.findElement(r);return n?(at(n.isDeploymentNode(),`Element ${n?.id} is not a deployment node`),n):null}instance(r){const n=this.element(r);return at(n.isInstance(),`Element ${n.id} is not a deployed instance`),n}findInstance(r){const n=this.findElement(r);return n?(at(n.isInstance(),`Element ${n?.id} is not a deployed instance`),n):null}roots(){return this.#s.values()}elements(){return this.#e.values()}*nodes(){for(const r of this.#e.values())r.isDeploymentNode()&&(yield r)}*nodesOfKind(r){for(const n of this.#e.values())n.isDeploymentNode()&&n.kind===r&&(yield n)}*instances(){for(const r of this.#e.values())r.isInstance()&&(yield r)}*instancesOf(r){const n=Tr(r),o=this.#r.get(n);o&&(yield*o)}deploymentRef(r){if(Y1.isInsideInstanceRef(r)){const{deployment:n,element:o}=r;return O6e(this.#u,`${n}@${o}`,()=>new J6e(this.instance(n),this.$model.element(o)))}return this.element(r.deployment)}relationships(){return this.#n.values()}relationship(r){return bt(this.#n.get(Tr(r)),`DeploymentRelationModel ${r} not found`)}findRelationship(r){return this.#n.get(r)??null}*views(){for(const r of this.$model.views())r.isDeploymentView()&&(yield r)}parent(r){const n=Tr(r);return this.#i.get(n)||null}children(r){const n=Tr(r);return this.#t.get(n)}*siblings(r){const n=Tr(r),o=this.parent(r)?.children()??this.roots();for(const a of o)a.id!==n&&(yield a)}*ancestors(r){let n=Tr(r),o;for(;o=this.#i.get(n);)yield o,n=o.id}*descendants(r,n="desc"){for(const o of this.children(r))n==="asc"?(yield o,yield*this.descendants(o.id)):(yield*this.descendants(o.id),yield o)}*incoming(r,n="all"){const o=Tr(r);for(const a of this.#l.get(o))switch(!0){case n==="all":case(n==="direct"&&a.target.id===o):case(n==="to-descendants"&&a.target.id!==o):yield a;break}}*outgoing(r,n="all"){const o=Tr(r);for(const a of this.#a.get(o))switch(!0){case n==="all":case(n==="direct"&&a.source.id===o):case(n==="from-descendants"&&a.source.id!==o):yield a;break}}addElement(r){if(this.#e.has(r.id))throw new Error(`Element ${r.id} already exists`);const n=k6e(r)?new XB(this,Object.freeze(r)):new KB(this,Object.freeze(r),this.$model.element(r.element));this.#e.set(n.id,n);const o=tx(n.id);return o?(at(this.#e.has(o),`Parent ${o} of ${n.id} not found`),this.#i.set(n.id,this.node(o)),this.#t.get(o).add(n)):(at(n.isDeploymentNode(),`Root element ${n.id} is not a deployment node`),this.#s.add(n)),n}addRelation(r){if(this.#n.has(r.id))throw new Error(`Relation ${r.id} already exists`);const n=new e8e(this,Object.freeze(r));this.#n.set(n.id,n),this.#l.get(n.target.id).add(n),this.#a.get(n.source.id).add(n);const o=n.boundary?.id??null;if(o)for(const a of[o,...jd(o)])this.#o.get(a).add(n);for(const a of jd(n.source.id)){if(a===o)break;this.#a.get(a).add(n)}for(const a of jd(n.target.id)){if(a===o)break;this.#l.get(a).add(n)}return n}}class oF{constructor(r,n){this.model=r,this.$relationship=n,this.source=r.element(Y1.flatten
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
`).replace(`
`,`
+`).split(`
`)),u=c.reduce((d,h)=>d.concat(...h),[]);return[c,u]}return[[],[]]},[e]);return E.useEffect(()=>{const c=r?.target??VV,u=r?.actInsideInputWithModifier??!0;if(e!==null){const d=g=>{if(a.current=g.ctrlKey||g.metaKey||g.shiftKey||g.altKey,(!a.current||a.current&&!u)&&KH(g))return!1;const b=UV(g.code,l);if(i.current.add(g[b]),qV(s,i.current,!1)){const x=g.composedPath?.()?.[0]||g.target,w=x?.nodeName==="BUTTON"||x?.nodeName==="A";r.preventDefault!==!1&&(a.current||!w)&&g.preventDefault(),o(!0)}},h=g=>{const b=UV(g.code,l);qV(s,i.current,!0)?(o(!1),i.current.clear()):i.current.delete(g[b]),g.key==="Meta"&&i.current.clear(),a.current=!1},f=()=>{i.current.clear(),o(!1)};return c?.addEventListener("keydown",d),c?.addEventListener("keyup",h),window.addEventListener("blur",f),window.addEventListener("contextmenu",f),()=>{c?.removeEventListener("keydown",d),c?.removeEventListener("keyup",h),window.removeEventListener("blur",f),window.removeEventListener("contextmenu",f)}}},[e,o]),n}function qV(e,r,n){return e.filter(o=>n||o.length===r.size).some(o=>o.every(a=>r.has(a)))}function UV(e,r){return r.includes(e)?"code":"key"}const GTe=()=>{const e=Ar();return E.useMemo(()=>({zoomIn:r=>{const{panZoom:n}=e.getState();return n?n.scaleBy(1.2,{duration:r?.duration}):Promise.resolve(!1)},zoomOut:r=>{const{panZoom:n}=e.getState();return n?n.scaleBy(1/1.2,{duration:r?.duration}):Promise.resolve(!1)},zoomTo:(r,n)=>{const{panZoom:o}=e.getState();return o?o.scaleTo(r,{duration:n?.duration}):Promise.resolve(!1)},getZoom:()=>e.getState().transform[2],setViewport:async(r,n)=>{const{transform:[o,a,i],panZoom:s}=e.getState();return s?(await s.setViewport({x:r.x??o,y:r.y??a,zoom:r.zoom??i},n),Promise.resolve(!0)):Promise.resolve(!1)},getViewport:()=>{const[r,n,o]=e.getState().transform;return{x:r,y:n,zoom:o}},setCenter:async(r,n,o)=>e.getState().setCenter(r,n,o),fitBounds:async(r,n)=>{const{width:o,height:a,minZoom:i,maxZoom:s,panZoom:l}=e.getState(),c=vu(r,o,a,i,s,n?.padding??.1);return l?(await l.setViewport(c,{duration:n?.duration,ease:n?.ease,interpolate:n?.interpolate}),Promise.resolve(!0)):Promise.resolve(!1)},screenToFlowPosition:(r,n={})=>{const{transform:o,snapGrid:a,snapToGrid:i,domNode:s}=e.getState();if(!s)return r;const{x:l,y:c}=s.getBoundingClientRect(),u={x:r.x-l,y:r.y-c},d=n.snapGrid??a,h=n.snapToGrid??i;return w0(u,o,h,d)},flowToScreenPosition:r=>{const{transform:n,domNode:o}=e.getState();if(!o)return r;const{x:a,y:i}=o.getBoundingClientRect(),s=E3(r,n);return{x:s.x+a,y:s.y+i}}}),[])};function WV(e,r){const n=[],o=new Map,a=[];for(const i of e)if(i.type==="add"){a.push(i);continue}else if(i.type==="remove"||i.type==="replace")o.set(i.id,[i]);else{const s=o.get(i.id);s?s.push(i):o.set(i.id,[i])}for(const i of r){const s=o.get(i.id);if(!s){n.push(i);continue}if(s[0].type==="remove")continue;if(s[0].type==="replace"){n.push({...s[0].item});continue}const l={...i};for(const c of s)XTe(c,l);n.push(l)}return a.length&&a.forEach(i=>{i.index!==void 0?n.splice(i.index,0,{...i.item}):n.push({...i.item})}),n}function XTe(e,r){switch(e.type){case"select":{r.selected=e.selected;break}case"position":{typeof e.position<"u"&&(r.position=e.position),typeof e.dragging<"u"&&(r.dragging=e.dragging);break}case"dimensions":{typeof e.dimensions<"u"&&(r.measured??={},r.measured.width=e.dimensions.width,r.measured.height=e.dimensions.height,e.setAttributes&&((e.setAttributes===!0||e.setAttributes==="width")&&(r.width=e.dimensions.width),(e.setAttributes===!0||e.setAttributes==="height")&&(r.height=e.dimensions.height))),typeof e.resizing=="boolean"&&(r.resizing=e.resizing);break}}}function $3(e,r){return WV(e,r)}function M3(e,r){return WV(e,r)}function pp(e,r){return{id:e,type:"select",selected:r}}function Lf(e,r=new Set,n=!1){const o=[];for(const[a,i]of e){const s=r.has(a);!(i.selected===void 0&&!s)&&i.selected!==s&&(n&&(i.selected=s),o.push(pp(i.id,s)))}return o}function YV({items:e=[],lookup:r}){const n=[],o=new Map(e.map(a=>[a.id,a]));for(const[a,i]of e.entries()){const s=r.get(i.id),l=s?.internals?.userNode??s;l!==void 0&&l!==i&&n.push({id:i.id,item:i,typ
M${N.x},${N.y}h${N.width}v${N.height}h${-N.width}z`,fillRule:"evenodd",pointerEvents:"none"})]})})}zq.displayName="MiniMap",E.memo(zq);const LRe=e=>r=>e?`${Math.max(1/r.transform[2],1)}`:void 0,BRe={[jf.Line]:"right",[jf.Handle]:"bottom-right"};function FRe({nodeId:e,position:r,variant:n=jf.Handle,className:o,style:a=void 0,children:i,color:s,minWidth:l=10,minHeight:c=10,maxWidth:u=Number.MAX_VALUE,maxHeight:d=Number.MAX_VALUE,keepAspectRatio:h=!1,resizeDirection:f,autoScale:g=!0,shouldResize:b,onResizeStart:x,onResize:w,onResizeEnd:k}){const C=R9(),_=typeof e=="string"?e:C,T=Ar(),A=E.useRef(null),R=n===jf.Handle,D=qt(E.useCallback(LRe(R&&g),[R,g]),Kr),N=E.useRef(null),M=r??BRe[n];E.useEffect(()=>{if(!(!A.current||!_))return N.current||(N.current=vTe({domNode:A.current,nodeId:_,getStoreItems:()=>{const{nodeLookup:F,transform:L,snapGrid:U,snapToGrid:P,nodeOrigin:V,domNode:I}=T.getState();return{nodeLookup:F,transform:L,snapGrid:U,snapToGrid:P,nodeOrigin:V,paneDomNode:I}},onChange:(F,L)=>{const{triggerNodeChanges:U,nodeLookup:P,parentLookup:V,nodeOrigin:I}=T.getState(),H=[],q={x:F.x,y:F.y},Z=P.get(_);if(Z&&Z.expandParent&&Z.parentId){const W=Z.origin??I,G=F.width??Z.measured.width??0,K=F.height??Z.measured.height??0,j={id:Z.id,parentId:Z.parentId,rect:{width:G,height:K,...YH({x:F.x??Z.position.x,y:F.y??Z.position.y},{width:G,height:K},Z.parentId,P,W)}},Y=b9([j],P,V,I);H.push(...Y),q.x=F.x?Math.max(W[0]*G,F.x):void 0,q.y=F.y?Math.max(W[1]*K,F.y):void 0}if(q.x!==void 0&&q.y!==void 0){const W={id:_,type:"position",position:{...q}};H.push(W)}if(F.width!==void 0&&F.height!==void 0){const W={id:_,type:"dimensions",resizing:!0,setAttributes:f?f==="horizontal"?"width":"height":!0,dimensions:{width:F.width,height:F.height}};H.push(W)}for(const W of L){const G={...W,type:"position"};H.push(G)}U(H)},onEnd:({width:F,height:L})=>{const U={id:_,type:"dimensions",resizing:!1,dimensions:{width:F,height:L}};T.getState().triggerNodeChanges([U])}})),N.current.update({controlPosition:M,boundaries:{minWidth:l,minHeight:c,maxWidth:u,maxHeight:d},keepAspectRatio:h,resizeDirection:f,onResizeStart:x,onResize:w,onResizeEnd:k,shouldResize:b}),()=>{N.current?.destroy()}},[M,l,c,u,d,h,x,w,k,b]);const O=M.split("-");return y.jsx("div",{className:_n(["react-flow__resize-control","nodrag",...O,n,o]),ref:A,style:{...a,scale:D,...s&&{[R?"backgroundColor":"borderColor"]:s}},children:i})}E.memo(FRe);const HRe=e=>e.domNode?.querySelector(".react-flow__renderer");function VRe({children:e}){const r=qt(HRe);return r?Ki.createPortal(e,r):null}const qRe=(e,r)=>e?.internals.positionAbsolute.x!==r?.internals.positionAbsolute.x||e?.internals.positionAbsolute.y!==r?.internals.positionAbsolute.y||e?.measured.width!==r?.measured.width||e?.measured.height!==r?.measured.height||e?.selected!==r?.selected||e?.internals.z!==r?.internals.z,URe=(e,r)=>{if(e.size!==r.size)return!1;for(const[n,o]of e)if(qRe(o,r.get(n)))return!1;return!0},WRe=e=>({x:e.transform[0],y:e.transform[1],zoom:e.transform[2],selectedNodesCount:e.nodes.filter(r=>r.selected).length});function D9({nodeId:e,children:r,className:n,style:o,isVisible:a,position:i=tt.Top,offset:s=10,align:l="center",...c}){const u=R9(),d=E.useCallback(T=>(Array.isArray(e)?e:[e||u||""]).reduce((A,R)=>{const D=T.nodeLookup.get(R);return D&&A.set(D.id,D),A},new Map),[e,u]),h=qt(d,URe),{x:f,y:g,zoom:b,selectedNodesCount:x}=qt(WRe,Kr);if(!(typeof a=="boolean"?a:h.size===1&&h.values().next().value?.selected&&x===1)||!h.size)return null;const w=$f(h),k=Array.from(h.values()),C=Math.max(...k.map(T=>T.internals.z+1)),_={position:"absolute",transform:HCe(w,{x:f,y:g,zoom:b},i,s,l),zIndex:C,...o};return y.jsx(VRe,{children:y.jsx("div",{style:_,className:_n(["react-flow__node-toolbar",n]),...c,"data-id":k.reduce((T,A)=>`${T}${A.id} `,"").trim(),children:r})})}function YRe(e,r,n){let o=a=>e(a,...r);return n===void 0?o:Object.assign(o,{lazy:n,lazyArgs:r})}function hr(e,r,n){let o=e.length-r.length;if(o===0)return e(...r);if(o===1)return YRe(e,r,n);throw Error("Wrong number of arguments")}const GRe=e=>(r,n)=>{if(n===0)return e(r);if(!N
.`.concat(tDe,` {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
overflow: hidden `).concat(o,`;
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(G3,` {
right: `).concat(l,"px ").concat(o,`;
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
}
.`).concat(X3,` {
margin-right: `).concat(l,"px ").concat(o,`;
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
}
.`).concat(G3," .").concat(G3,` {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
right: 0 `).concat(o,`;
}
.`).concat(X3," .").concat(X3,` {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
margin-right: 0 `).concat(o,`;
}
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")})},F9=!1;if(typeof window<"u")try{var Z3=Object.defineProperty({},"passive",{get:function(){return F9=!0,!0}});window.addEventListener("test",Z3,Z3),window.removeEventListener("test",Z3,Z3)}catch{F9=!1}var Vf=F9?{passive:!1}:!1,_De=function(e){return e.tagName==="TEXTAREA"},nU=function(e,r){if(!(e instanceof Element))return!1;var n=window.getComputedStyle(e);return n[r]!=="hidden"&&!(n.overflowY===n.overflowX&&!_De(e)&&n[r]==="visible")},EDe=function(e){return nU(e,"overflowY")},SDe=function(e){return nU(e,"overflowX")},oU=function(e,r){var n=r.ownerDocument,o=r;do{typeof ShadowRoot<"u"&&o instanceof ShadowRoot&&(o=o.host);var a=aU(e,o);if(a){var i=iU(e,o),s=i[1],l=i[2];if(s>l)return!0}o=o.parentNode}while(o&&o!==n.body);return!1},CDe=function(e){var r=e.scrollTop,n=e.scrollHeight,o=e.clientHeight;return[r,n,o]},TDe=function(e){var r=e.scrollLeft,n=e.scrollWidth,o=e.clientWidth;return[r,n,o]},aU=function(e,r){return e==="v"?EDe(r):SDe(r)},iU=function(e,r){return e==="v"?CDe(r):TDe(r)},ADe=function(e,r){return e==="h"&&r==="rtl"?-1:1},RDe=function(e,r,n,o,a){var i=ADe(e,window.getComputedStyle(r).direction),s=i*o,l=n.target,c=r.contains(l),u=!1,d=s>0,h=0,f=0;do{if(!l)break;var g=iU(e,l),b=g[0],x=g[1],w=g[2],k=x-w-i*b;(b||k)&&aU(e,l)&&(h+=k,f+=b);var C=l.parentNode;l=C&&C.nodeType===Node.DOCUMENT_FRAGMENT_NODE?C.host:C}while(!c&&l!==document.body||c&&(r.contains(l)||r===l));return(d&&Math.abs(h)<1||!d&&Math.abs(f)<1)&&(u=!0),u},Q3=function(e){return"changedTouches"in e?[e.changedTouches[0].clientX,e.changedTouches[0].clientY]:[0,0]},sU=function(e){return[e.deltaX,e.deltaY]},lU=function(e){return e&&"current"in e?e.current:e},NDe=function(e,r){return e[0]===r[0]&&e[1]===r[1]},DDe=function(e){return`
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
.block-interactivity-`.concat(e,` {pointer-events: none;}
.allow-interactivity-`).concat(e,` {pointer-events: all;}
`)},$De=0,qf=[];function MDe(e){var r=E.useRef([]),n=E.useRef([0,0]),o=E.useRef(),a=E.useState($De++)[0],i=E.useState(tU)[0],s=E.useRef(e);E.useEffect(function(){s.current=e},[e]),E.useEffect(function(){if(e.inert){document.body.classList.add("block-interactivity-".concat(a));var x=eDe([e.lockRef.current],(e.shards||[]).map(lU)).filter(Boolean);return x.forEach(function(w){return w.classList.add("allow-interactivity-".concat(a))}),function(){document.body.classList.remove("block-interactivity-".concat(a)),x.forEach(function(w){return w.classList.remove("allow-interactivity-".concat(a))})}}},[e.inert,e.lockRef.current,e.shards]);var l=E.useCallback(function(x,w){if("touches"in x&&x.touches.length===2||x.type==="wheel"&&x.ctrlKey)return!s.current.allowPinchZoom;var k=Q3(x),C=n.current,_="deltaX"in x?x.deltaX:C[0]-k[0],T="deltaY"in x?x.deltaY:C[1]-k[1],A,R=x.target,D=Math.abs(_)>Math.abs(T)?"h":"v";if("touches"in x&&D==="h"&&R.type==="range")return!1;var N=oU(D,R);if(!N)return!0;if(N?A=D:(A=D==="v"?"h":"v",N=oU(D,R)),!N)return!1;if(!o.current&&"changedTouches"in x&&(_||T)&&(o.current=A),!A)return!0;var M=o.current||A;return RDe(M,w,x,M==="h"?_:T)},[]),c=E.useCallback(function(x){var w=x;if(!(!qf.length||qf[qf.length-1]!==i)){var k="deltaY"in w?sU(w):Q3(w),C=r.current.filter(function(A){return A.name===w.type&&(A.target===w.target||w.target===A.shadowParent)&&NDe(A.delta,k)})[0];if(C&&C.should){w.cancelable&&w.preventDefault();return}if(!C){var _=(s.current.shards||[]).map(lU).filter(Boolean).filter(function(A){return A.contains(w.target)}),T=_.length>0?l(w,_[0]):!s.current.noIsolation;T&&w.cancelable&&w.preventDefault()}}},[]),u=E.useCallback(function(x,w,k,C){var _={name:x,delta:w,target:k,should:C,shadowParent:PDe(k)};r.current.push(_),setTimeout(function(){r.current=r.current.filter(function(T){return T!==_})},1)},[]),d=E.useCallback(function(x){n.current=Q3(x),o.current=void 0},[]),h=E.useCallback(function(x){u(x.type,sU(x),x.target,l(x,e.lockRef.current))},[]),f=E.useCallback(function(x){u(x.type,Q3(x),x.target,l(x,e.lockRef.current))},[]);E.useEffect(function(){return qf.push(i),e.setCallbacks({onScrollCapture:h,onWheelCapture:h,onTouchMoveCapture:f}),document.addEventListener("wheel",c,Vf),document.addEventListener("touchmove",c,Vf),document.addEventListener("touchstart",d,Vf),function(){qf=qf.filter(function(x){return x!==i}),document.removeEventListener("wheel",c,Vf),document.removeEventListener("touchmove",c,Vf),document.removeEventListener("touchstart",d,Vf)}},[]);var g=e.removeScrollBar,b=e.inert;return E.createElement(E.Fragment,null,b?E.createElement(i,{styles:DDe(a)}):null,g?E.createElement(kDe,{noRelative:e.noRelative,gapMode:e.gapMode}):null)}function PDe(e){for(var r=null;e!==null;)e instanceof ShadowRoot&&(r=e.host,e=e.host),e=e.parentNode;return r}const zDe=cDe(eU,MDe);var A0=E.forwardRef(function(e,r){return E.createElement(K3,pl({},e,{ref:r,sideCar:zDe}))});A0.classNames=K3.classNames;function zo(e){return Object.keys(e)}function H9(e){return e&&typeof e=="object"&&!Array.isArray(e)}function V9(e,r){const n={...e},o=r;return H9(e)&&H9(r)&&Object.keys(r).forEach(a=>{H9(o[a])&&a in e?n[a]=V9(n[a],o[a]):n[a]=o[a]}),n}function IDe(e){return e.replace(/[A-Z]/g,r=>`-${r.toLowerCase()}`)}function ODe(e){return typeof e!="string"||!e.includes("var(--mantine-scale)")?e:e.match(/^calc\((.*?)\)$/)?.[1].split("*")[0].trim()}function q9(e){const r=ODe(e);return typeof r=="number"?r:typeof r=="string"?r.includes("calc")||r.includes("var")?r:r.includes("px")?Number(r.replace("px","")):r.includes("rem")?Number(r.replace("rem",""))*16:r.includes("em")?Number(r.replace("em",""))*16:Number(r):NaN}function cU(e){return e==="0rem"?"0rem":`calc(${e} * var(--mantine-scale))`}function uU(e,{shouldScale:r=!1}={}){function n(o){if(o===0||o==="0")return`0${e}`;if(typeof o=="number"){const a=`${o/16}${e}`;return r?cU(a):a}if(typeof o=="string"){if(o===""||o.startsWith("calc(")||o.startsWith("clamp(")||o.includes("rgba("))return o;if(o.includes(","))return o.split(",").map(i=>n(i)).join(",");if(o.includes(" "))return o.split(" ")
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
${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 o7({color:e,theme:r,autoContrast:n}){return(typeof n=="boolean"?n:r.autoContrast)&&Au({color:e||r.primaryColor,theme:r}).isLight?"var(--mantine-color-black)":"var(--mantine-color-white)"}function FU(e,r){return o7({color:e.colors[e.primaryColor][M0(e,r)],theme:e,autoContrast:null})}function l2({theme:e,color:r,colorScheme:n,name:o=r,withColorValues:a=!0}){if(!e.colors[r])return{};if(n==="light"){const l=M0(e,"light"),c={[`--mantine-color-${o}-text`]:`var(--mantine-color-${o}-filled)`,[`--mantine-color-${o}-filled`]:`var(--mantine-color-${o}-${l})`,[`--mantine-color-${o}-filled-hover`]:`var(--mantine-color-${o}-${l===9?8:l+1})`,[`--mantine-color-${o}-light`]:Xf(e.colors[r][l],.1),[`--mantine-color-${o}-light-hover`]:Xf(e.colors[r][l],.12),[`--mantine-color-${o}-light-color`]:`var(--mantine-color-${o}-${l})`,[`--mantine-color-${o}-outline`]:`var(--mantine-color-${o}-${l})`,[`--mantine-color-${o}-outline-hover`]:Xf(e.colors[r][l],.05)};return a?{[`--mantine-color-${o}-0`]:e.colors[r][0],[`--mantine-color-${o}-1`]:e.colors[r][1],[`--mantine-color-${o}-2`]:e.colors[r][2],[`--mantine-color-${o}-3`]:e.colors[r][3],[`--mantine-color-${o}-4`]:e.colors[r][4],[`--mantine-color-${o}-5`]:e.colors[r][5],[`--mantine-color-${o}-6`]:e.colors[r][6],[`--mantine-color-${o}-7`]:e.colors[r][7],[`--mantine-color-${o}-8`]:e.colors[r][8],[`--mantine-color-${o}-9`]:e.colors[r][9],...c}:c}const i=M0(e,"dark"),s={[`--mantine-color-${o}-text`]:`var(--mantine-color-${o}-4)`,[`--mantine-color-${o}-filled`]:`var(--mantine-color-${o}-${i})`,[`--mantine-color-${o}-filled-hover`]:`var(--mantine-color-${o}-${i===9?8:i+1})`,[`--mantine-color-${o}-light`]:Xf(e.colors[r][Math.max(0,i-2)],.15),[`--mantine-color-${o}-light-hover`]:Xf(e.colors[r][Math.max(0,i-2)],.2),[`--mantine-color-${o}-light-color`]:`var(--mantine-color-${o}-${Math.max(i-5,0)})`,[`--mantine-color-${o}-outline`]:`var(--mantine-color-${o}-${Math.max(i-4,0)})`,[`--mantine-color-${o}-outline-hover`]:Xf(e.colors[r][Math.max(i-4,0)],.05)};return a?{[`--mantine-color-${o}-0`]:e.colors[r][0],[`--mantine-color-${o}-1`]:e.colors[r][1],[`--mantine-color-${o}-2`]:e.colors[r][2],[`--mantine-color-${o}-3`]:e.colors[r][3],[`--mantine-color-${o}-4`]:e.colors[r][4],[`--mantine-color-${o}-5`]:e.colors[r][5],[`--mantine-color-${o}-6`]:e.colors[r][6],[`--mantine-color-${o}-7`]:e.colors[r][7],[`--mantine-color-${o}-8`]:e.colors[r][8],[`--mantine-color-${o}-9`]:e.colors[r][9],...s}:s}function K$e(e){return!!e&&typeof e=="object"&&"mantine-virtual-color"in e}function Kf(e,r,n){zo(r).forEach(o=>Object.assign(e,{[`--mantine-${n}-${o}`]:r[o]}))}const HU=e=>{const r=M0(e,"light"),n=e.defaultRadius in e.radius?e.radius[e.defaultRadius]:Me(e.defaultRadius),o={variables:{"--mantine-z-index-app":"100","--mantine-z-index-modal":"200","--mantine-z-index-popover":"300","--mantine-z-index-overlay":"400","--mantine-z-index-max":"9999","--mantine-scale":e.scale.toString(),"--mantine-cursor-type":e.cursorType,"--mantine-webkit-font-smoothing":e.fontSmoothing?"antialiased":"unset","--mantine-moz-font-smoothing":e.fontSmoothing?"grayscale":"unset","--mantine-color-white":e.white,"--mantine-color-black":e.black,"--mantine-line-height":e.lineHeights.md,"--mantine-font-family":e.fontFamily,"--mantine-font-family-monospace":e.fontFamilyMonospace,"--mantine-font-family-headings":e.headings.fontFamily,"--mantine-heading-font-weight":e.headings.fontWeight,"--mantine-heading-text-wrap":e.headings.textWrap,"--mantine-radius-default":n,"--mantine-primary-color-filled":`var(--mantine-color-${e.primaryColor}-filled)`,"--mantine-primary-color-filled-hover":`var(--mantine-color-${e.primaryColor}-filled-hover)`,"--mantine-primary-color-light":`var(--mantine-color-${e.primaryColor}-light)`,"--mantine-primary-color-light-hover":`var(--mantine-color-${e.primaryColor}-light-hover)`,"--mantine-primary-color-light-color":`var(--mantine-color-${e.primaryColor}-light-color)`},light:{"--mantine-color-scheme":"light","--mantine-primary-color-contrast":FU(e,"light"),"--mantine-color-bright":"var(--mantine-color-black)","--mantine-color-text
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
${e}[data-mantine-color-scheme="dark"] { --mantine-color-scheme: dark; }
${e}[data-mantine-color-scheme="light"] { --mantine-color-scheme: light; }
`}function VU({cssVariablesSelector:e,deduplicateCssVariables:r}){const n=vo(),o=yp(),a=N$e(),i=Z$e({theme:n,generator:a}),s=e===":root"&&r,l=s?Q$e(i):i,c=X$e(l,e);return c?y.jsx("style",{"data-mantine-styles":!0,nonce:o?.(),dangerouslySetInnerHTML:{__html:`${c}${s?"":J$e(e)}`}}):null}VU.displayName="@mantine/CssVariables";function Zf(e,r){const n=typeof window<"u"&&"matchMedia"in window&&window.matchMedia("(prefers-color-scheme: dark)")?.matches,o=e!=="auto"?e:n?"dark":"light";r()?.setAttribute("data-mantine-color-scheme",o)}function eMe({manager:e,defaultColorScheme:r,getRootElement:n,forceColorScheme:o}){const a=E.useRef(null),[i,s]=E.useState(()=>e.get(r)),l=o||i,c=E.useCallback(d=>{o||(Zf(d,n),s(d),e.set(d))},[e.set,l,o]),u=E.useCallback(()=>{s(r),Zf(r,n),e.clear()},[e.clear,r]);return E.useEffect(()=>(e.subscribe(c),e.unsubscribe),[e.subscribe,e.unsubscribe]),$0(()=>{Zf(e.get(r),n)},[]),E.useEffect(()=>{if(o)return Zf(o,n),()=>{};o===void 0&&Zf(i,n),typeof window<"u"&&"matchMedia"in window&&(a.current=window.matchMedia("(prefers-color-scheme: dark)"));const d=h=>{i==="auto"&&Zf(h.matches?"dark":"light",n)};return a.current?.addEventListener("change",d),()=>a.current?.removeEventListener("change",d)},[i,o]),{colorScheme:l,setColorScheme:c,clearColorScheme:u}}function tMe({respectReducedMotion:e,getRootElement:r}){$0(()=>{e&&r()?.setAttribute("data-respect-reduced-motion","true")},[e])}function i7({theme:e,children:r,getStyleNonce:n,withStaticClasses:o=!0,withGlobalClasses:a=!0,deduplicateCssVariables:i=!0,withCssVariables:s=!0,cssVariablesSelector:l=":root",classNamesPrefix:c="mantine",colorSchemeManager:u=q$e(),defaultColorScheme:d="light",getRootElement:h=()=>document.documentElement,cssVariablesResolver:f,forceColorScheme:g,stylesTransform:b,env:x}){const{colorScheme:w,setColorScheme:k,clearColorScheme:C}=eMe({defaultColorScheme:d,forceColorScheme:g,manager:u,getRootElement:h});return tMe({respectReducedMotion:e?.respectReducedMotion||!1,getRootElement:h}),y.jsx(a2.Provider,{value:{colorScheme:w,setColorScheme:k,clearColorScheme:C,getRootElement:h,classNamesPrefix:c,getStyleNonce:n,cssVariablesResolver:f,cssVariablesSelector:l,withStaticClasses:o,stylesTransform:b,env:x},children:y.jsxs(BU,{theme:e,children:[s&&y.jsx(VU,{cssVariablesSelector:l,deduplicateCssVariables:i}),a&&y.jsx(G$e,{}),r]})})}i7.displayName="@mantine/core/MantineProvider";function s7({classNames:e,styles:r,props:n,stylesCtx:o}){const a=vo();return{resolvedClassNames:n2({theme:a,classNames:e,props:n,stylesCtx:o||void 0}),resolvedStyles:o2({theme:a,styles:r,props:n,stylesCtx:o||void 0})}}const rMe={always:"mantine-focus-always",auto:"mantine-focus-auto",never:"mantine-focus-never"};function nMe({theme:e,options:r,unstyled:n}){return hs(r?.focusable&&!n&&(e.focusClassName||rMe[e.focusRing]),r?.active&&!n&&e.activeClassName)}function oMe({selector:e,stylesCtx:r,options:n,props:o,theme:a}){return n2({theme:a,classNames:n?.classNames,props:n?.props||o,stylesCtx:r})[e]}function qU({selector:e,stylesCtx:r,theme:n,classNames:o,props:a}){return n2({theme:n,classNames:o,props:a,stylesCtx:r})[e]}function aMe({rootSelector:e,selector:r,className:n}){return e===r?n:void 0}function iMe({selector:e,classes:r,unstyled:n}){return n?void 0:r[e]}function sMe({themeName:e,classNamesPrefix:r,selector:n,withStaticClass:o}){return o===!1?[]:e.map(a=>`${r}-${a}-${n}`)}function lMe({themeName:e,theme:r,selector:n,props:o,stylesCtx:a}){return e.map(i=>n2({theme:r,classNames:r.components[i]?.classNames,props:o,stylesCtx:a})?.[n])}function cMe({options:e,classes:r,selector:n,unstyled:o}){return e?.variant&&!o?r[`${n}--${e.variant}`]:void 0}function uMe({theme:e,options:r,themeName:n,selector:o,classNamesPrefix:a,classNames:i,classes:s,unstyled:l,className:c,rootSelector:u,props:d,stylesCtx:h,withStaticClasses:f,headless:g,transformedStyles:b}){return hs(nMe({theme:e,options:r,unstyled:l||g}),lMe({theme:e,themeName:n,selector:o,props:d,stylesCtx:h}),cMe({options:r,classes:s,selector:o,unstyled:l}),qU({selector:o,stylesCtx:h,theme:e,classNames:i,props:d}),qU({selector:o,sty
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
--colors-likec4-tag-bg: ${r};
--colors-likec4-tag-bg-hover: color-mix(in srgb, ${r}, var(--colors-likec4-mix-color) 20%);
`;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(M9(e),pNe(([n,o])=>[`:is(${r} [data-likec4-tag="${n}"]) {`,rLe(o),"}"]),qq(`
`))}function oLe({children:e,rootSelector:r}){const n=eLe().tags,o=nLe(n,r);return y.jsxs(qG.Provider,{value:n,children:[o!==""&&y.jsx(aLe,{stylesheet:o}),e]})}const aLe=E.memo(({stylesheet:e})=>{const r=yp()?.();return y.jsx("style",{"data-likec4-tags":!0,type:"text/css",dangerouslySetInnerHTML:{__html:e},nonce:r})});function iLe(e){return E.useContext(qG)[e]??{color:"tomato"}}function UG(){return fi().replace("mantine-","likec4-")}var sLe="css,pos,insetX,insetY,insetEnd,end,insetStart,start,flexDir,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,textShadowColor,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,bgLinear,bgRadial,bgConic,rounded,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,z,scrollMarginY,scrollMarginX,scrollPaddingY,scrollPaddingX,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,inset,insetInline,insetBlock,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,spaceX,spaceY,outlineWidth,outlineColor,outline,outlineOffset,focusRing,focusVisibleRing,focusRingColor,focusRingOffset,focusRingWidth,focusRingStyle,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,boxSize,color,fontFamily,fontSize,fontSizeAdjust,fontPalette,fontKerning,fontFeatureSettings,fontWeight,fontSmoothing,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariationSettings,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,listStyle,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,backgroundLinear,backgroundRadial,backgroundConic,textGradient,gradientFromPosition,gradientToPosition,gradientFrom,gradientTo,gradientVia,gradientViaPosition,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,borderBlockStartWidth,borderBlockEndWidth,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,borderInlineEndWidth,borde
${i.message}`)}else throw new Error(`Invalid target: "${n}" is not a valid target from the root node. Did you mean ".${n}"?`)})}function wX(e){const r=mX(e.config.target);return r?{target:r.map(n=>typeof n=="string"?cw(e.parent,n):n)}:e.parent.initial}function $p(e){return e.type==="history"}function kX(e){const r=_X(e);for(const n of r)for(const o of ey(n,e))r.add(o);return r}function _X(e){const r=new Set;function n(o){if(!r.has(o)){if(r.add(o),o.type==="compound")n(o.initial.target[0]);else if(o.type==="parallel")for(const a of gm(o))n(a)}}return n(e),r}function ym(e,r){if(lw(r))return e.machine.getStateNodeById(r);if(!e.states)throw new Error(`Unable to retrieve child state '${r}' from '${e.id}'; no child states exist.`);const n=e.states[r];if(!n)throw new Error(`Child state '${r}' does not exist on '${e.id}'`);return n}function cw(e,r){if(typeof r=="string"&&lw(r))try{return e.machine.getStateNodeById(r)}catch{}const n=MS(r).slice();let o=e;for(;n.length;){const a=n.shift();if(!a.length)break;o=ym(o,a)}return o}function uw(e,r){if(typeof r=="string"){const a=e.states[r];if(!a)throw new Error(`State '${r}' does not exist on '${e.id}'`);return[e,a]}const n=Object.keys(r),o=n.map(a=>ym(e,a)).filter(Boolean);return[e.machine.root,e].concat(o,n.reduce((a,i)=>{const s=ym(e,i);if(!s)return a;const l=uw(s,r[i]);return a.concat(l)},[]))}function ZLe(e,r,n,o){const a=ym(e,r).next(n,o);return!a||!a.length?e.next(n,o):a}function QLe(e,r,n,o){const a=Object.keys(r),i=ym(e,a[0]),s=BS(i,r[a[0]],n,o);return!s||!s.length?e.next(n,o):s}function JLe(e,r,n,o){const a=[];for(const i of Object.keys(r)){const s=r[i];if(!s)continue;const l=ym(e,i),c=BS(l,s,n,o);c&&a.push(...c)}return a.length?a:e.next(n,o)}function BS(e,r,n,o){return typeof r=="string"?ZLe(e,r,n,o):Object.keys(r).length===1?QLe(e,r,n,o):JLe(e,r,n,o)}function eBe(e){return Object.keys(e.states).map(r=>e.states[r]).filter(r=>r.type==="history")}function Ou(e,r){let n=e;for(;n.parent&&n.parent!==r;)n=n.parent;return n.parent===r}function tBe(e,r){const n=new Set(e),o=new Set(r);for(const a of n)if(o.has(a))return!0;for(const a of o)if(n.has(a))return!0;return!1}function EX(e,r,n){const o=new Set;for(const a of e){let i=!1;const s=new Set;for(const l of o)if(tBe(HS([a],r,n),HS([l],r,n)))if(Ou(a.source,l.source))s.add(l);else{i=!0;break}if(!i){for(const l of s)o.delete(l);o.add(a)}}return Array.from(o)}function rBe(e){const[r,...n]=e;for(const o of ey(r,void 0))if(n.every(a=>Ou(a,o)))return o}function FS(e,r){if(!e.target)return[];const n=new Set;for(const o of e.target)if($p(o))if(r[o.id])for(const a of r[o.id])n.add(a);else for(const a of FS(wX(o),r))n.add(a);else n.add(o);return[...n]}function SX(e,r){const n=FS(e,r);if(!n)return;if(!e.reenter&&n.every(a=>a===e.source||Ou(a,e.source)))return e.source;const o=rBe(n.concat(e.source));if(o)return o;if(!e.reenter)return e.source.machine.root}function HS(e,r,n){const o=new Set;for(const a of e)if(a.target?.length){const i=SX(a,n);a.reenter&&a.source===i&&o.add(i);for(const s of r)Ou(s,i)&&o.add(s)}return[...o]}function nBe(e,r){if(e.length!==r.size)return!1;for(const n of e)if(!r.has(n))return!1;return!0}function VS(e,r,n,o,a,i){if(!e.length)return r;const s=new Set(r._nodes);let l=r.historyValue;const c=EX(e,s,l);let u=r;a||([u,l]=sBe(u,o,n,c,s,l,i,n.actionExecutor)),u=vm(u,o,n,c.flatMap(h=>h.actions),i,void 0),u=aBe(u,o,n,c,s,i,l,a);const d=[...s];u.status==="done"&&(u=vm(u,o,n,d.sort((h,f)=>f.order-h.order).flatMap(h=>h.exit),i,void 0));try{return l===r.historyValue&&nBe(r._nodes,s)?u:Mp(u,{_nodes:d,historyValue:l})}catch(h){throw h}}function oBe(e,r,n,o,a){if(o.output===void 0)return;const i=$S(a.id,a.output!==void 0&&a.parent?PS(a.output,e.context,r,n.self):void 0);return PS(o.output,e.context,i,n.self)}function aBe(e,r,n,o,a,i,s,l){let c=e;const u=new Set,d=new Set;iBe(o,s,d,u),l&&d.add(e.machine.root);const h=new Set;for(const f of[...u].sort((g,b)=>g.order-b.order)){a.add(f);const g=[];g.push(...f.entry);for(const b of f.invoke)g.push(aw(b.src,{...b,syncSnapshot:!!b.onSnapshot}));if(d.has(f)){const b=f.initial.actions;g.
${h.message}`)}if(d){a.push(...l.actions),i=l;break}}return i?[i]:void 0}get events(){return xm(this,"events",()=>{const{states:r}=this,n=new Set(this.ownEvents);if(r)for(const o of Object.keys(r)){const a=r[o];if(a.states)for(const i of a.events)n.add(`${i}`)}return Array.from(n)})}get ownEvents(){const r=new Set([...this.transitions.keys()].filter(n=>this.transitions.get(n).some(o=>!(!o.target&&!o.actions.length&&!o.reenter))));return Array.from(r)}}const SBe="#";class YS{constructor(r,n){this.config=r,this.version=void 0,this.schemas=void 0,this.implementations=void 0,this.__xstatenode=!0,this.idMap=new Map,this.root=void 0,this.id=void 0,this.states=void 0,this.events=void 0,this.id=r.id||"(machine)",this.implementations={actors:n?.actors??{},actions:n?.actions??{},delays:n?.delays??{},guards:n?.guards??{}},this.version=this.config.version,this.schemas=this.config.schemas,this.transition=this.transition.bind(this),this.getInitialSnapshot=this.getInitialSnapshot.bind(this),this.getPersistedSnapshot=this.getPersistedSnapshot.bind(this),this.restoreSnapshot=this.restoreSnapshot.bind(this),this.start=this.start.bind(this),this.root=new hw(r,{_key:this.id,_machine:this}),this.root._initialize(),this.states=this.root.states,this.events=this.root.events}provide(r){const{actions:n,guards:o,actors:a,delays:i}=this.implementations;return new YS(this.config,{actions:{...n,...r.actions},guards:{...o,...r.guards},actors:{...a,...r.actors},delays:{...i,...r.delays}})}resolveState(r){const n=uBe(this.root,r.value),o=sw(uw(this.root,n));return dw({_nodes:[...o],context:r.context||{},children:{},status:LS(o,this.root)?"done":r.status||"active",output:r.output,error:r.error,historyValue:r.historyValue},this)}transition(r,n,o){return US(r,n,o,[]).snapshot}microstep(r,n,o){return US(r,n,o,[]).microstates}getTransitionData(r,n){return BS(this.root,r.value,r,n)||[]}getPreInitialState(r,n,o){const{context:a}=this.config,i=dw({context:typeof a!="function"&&a?a:{},_nodes:[this.root],children:{},status:"active"},this);return typeof a=="function"?vm(i,n,r,[Zt(({spawn:s,event:l,self:c})=>a({spawn:s,input:l.input,self:c}))],o,void 0):i}getInitialSnapshot(r,n){const o=cX(n),a=[],i=this.getPreInitialState(r,o,a),s=VS([{target:[..._X(this.root)],source:this.root,reenter:!0,actions:[],eventType:null,toJSON:null}],i,r,o,!0,a),{snapshot:l}=US(s,o,r,a);return l}start(r){Object.values(r.children).forEach(n=>{n.getSnapshot().status==="active"&&n.start()})}getStateNodeById(r){const n=MS(r),o=n.slice(1),a=lw(n[0])?n[0].slice(SBe.length):n[0],i=this.idMap.get(a);if(!i)throw new Error(`Child state node '#${a}' does not exist on machine '${this.id}'`);return cw(i,o)}get definition(){return this.root.definition}toJSON(){return this.definition}getPersistedSnapshot(r,n){return bBe(r,n)}restoreSnapshot(r,n){const o={},a=r.children;Object.keys(a).forEach(h=>{const f=a[h],g=f.snapshot,b=f.src,x=typeof b=="string"?zS(this,b):b;if(!x)return;const w=mm(x,{id:h,parent:n.self,syncSnapshot:f.syncSnapshot,snapshot:g,src:b,systemId:f.systemId});o[h]=w});function i(h,f){if(f instanceof hw)return f;try{return h.machine.getStateNodeById(f.id)}catch{}}function s(h,f){if(!f||typeof f!="object")return{};const g={};for(const b in f){const x=f[b];for(const w of x){const k=i(h,w);k&&(g[b]??=[],g[b].push(k))}}return g}const l=s(this.root,r.historyValue),c=dw({...r,children:o,_nodes:Array.from(sw(uw(this.root,r.value))),historyValue:l},this),u=new Set;function d(h,f){if(!u.has(h)){u.add(h);for(const g in h){const b=h[g];if(b&&typeof b=="object"){if("xstate$$type"in b&&b.xstate$$type===OS){h[g]=f[b.id];continue}d(b,f)}}}}return d(c.context,o),c}}function CBe(e,r,n,o,{event:a}){const i=typeof a=="function"?a(n,o):a;return[r,{event:i},void 0]}function TBe(e,{event:r}){e.defer(()=>e.emit(r))}function GS(e){function r(n,o){}return r.type="xstate.emit",r.event=e,r.resolve=CBe,r.execute=TBe,r}let XS=(function(e){return e.Parent="#_parent",e.Internal="#_internal",e})({});function ABe(e,r,n,o,{to:a,event:i,id:s,delay:l},c){const u=r.machine.implementations.delays;if(typeof i=="string")throw
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
[data-motion-pop-id="${a}"] {
position: absolute !important;
width: ${u}px !important;
height: ${d}px !important;
${b}px !important;
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 u=Dm(jVe),d=E.useId();let h=!0,f=E.useMemo(()=>(h=!1,{id:d,initial:r,isPresent:n,custom:a,onExitComplete:g=>{u.set(g,!0);for(const b of u.values())if(!b)return;o&&o()},register:g=>(u.set(g,!1),()=>u.delete(g))}),[n,u,o]);return i&&h&&(f={...f}),E.useMemo(()=>{u.forEach((g,b)=>u.set(b,!1))},[n]),E.useEffect(()=>{!n&&!u.size&&o&&o()},[n]),s==="popLayout"&&(e=y.jsx(IVe,{isPresent:n,anchorX:l,root:c,children:e})),y.jsx(Tw.Provider,{value:f,children:e})};function jVe(){return new Map}function PZ(e=!0){const r=E.useContext(Tw);if(r===null)return[!0,null];const{isPresent:n,onExitComplete:o,register:a}=r,i=E.useId();E.useEffect(()=>{if(e)return a(i)},[e]);const s=E.useCallback(()=>e&&o&&o(i),[i,o,e]);return!n&&o?[!1,s]:[!0]}const Aw=e=>e.key||"";function zZ(e){const r=[];return E.Children.forEach(e,n=>{E.isValidElement(n)&&r.push(n)}),r}const Qn=({children:e,custom:r,initial:n=!0,onExitComplete:o,presenceAffectsLayout:a=!0,mode:i="sync",propagate:s=!1,anchorX:l="left",root:c})=>{const[u,d]=PZ(s),h=E.useMemo(()=>zZ(e),[e]),f=s&&!u?[]:h.map(Aw),g=E.useRef(!0),b=E.useRef(h),x=Dm(()=>new Map),[w,k]=E.useState(h),[C,_]=E.useState(h);tT(()=>{g.current=!1,b.current=h;for(let R=0;R<C.length;R++){const D=Aw(C[R]);f.includes(D)?x.delete(D):x.get(D)!==!0&&x.set(D,!1)}},[C,f.length,f.join("-")]);const T=[];if(h!==w){let R=[...h];for(let D=0;D<C.length;D++){const N=C[D],M=Aw(N);f.includes(M)||(R.splice(D,0,N),T.push(N))}return i==="wait"&&T.length&&(R=T),_(zZ(R)),k(h),null}const{forceRender:A}=E.useContext(fy);return y.jsx(y.Fragment,{children:C.map(R=>{const D=Aw(R),N=s&&!u?!1:h===C||f.includes(D),M=()=>{if(x.has(D))x.set(D,!0);else return;let O=!0;x.forEach(F=>{F||(O=!1)}),O&&(A?.(),_(b.current),s&&d?.(),o&&o())};return y.jsx(OVe,{isPresent:N,initial:!g.current||n?void 0:!1,custom:r,presenceAffectsLayout:a,mode:i,root:c,onExitComplete:N?void 0:M,anchorX:l,children:R},D)})})},LVe=E.createContext(null);function BVe(){const e=E.useRef(!1);return tT(()=>(e.current=!0,()=>{e.current=!1}),[]),e}function FVe(){const e=BVe(),[r,n]=E.useState(0),o=E.useCallback(()=>{e.current&&n(r+1)},[r]);return[E.useCallback(()=>qr.postRender(o),[o]),r]}const HVe=e=>!e.isLayoutDirty&&e.willUpdate(!1);function VVe(){const e=new Set,r=new WeakMap,n=()=>e.forEach(HVe);return{add:o=>{e.add(o),r.set(o,o.addEventListener("willUpdate",n))},remove:o=>{e.delete(o);const a=r.get(o);a&&(a(),r.delete(o)),n()},dirty:n}}const IZ=e=>e===!0,qVe=e=>IZ(e===!0)||e==="id",$m=({children:e,id:r,inherit:n=!0})=>{const o=E.useContext(fy),a=E.useContext(LVe),[i,s]=FVe(),l=E.useRef(null),c=o.id||a;l.current===null&&(qVe(n)&&c&&(r=r?c+"-"+r:c),l.current={id:r,group:IZ(n)&&o.group||VVe()});const u=E.useMemo(()=>({...l.current,forceRender:i}),[s]);return y.jsx(fy.Provider,{value:u,children:e})},rT=E.createContext({strict:!1});function nT(e){for(const r in e)Rm[r]={...Rm[r],...e[r]}}function UVe({children:e,features:r,strict:n=!1}){const[,o]=E.useState(!oT(r)),a=E.useRef(void 0);if(!oT(r)){const{renderer:i,...s}=r;a.current=i,nT(s)}return E.useEffect(()=>{oT(r)&&r().then(({renderer:i,...s})=>{nT(s),a.current=i,o(!0)})},[]),y.jsx(rT.Provider,{value:{renderer:a.current,strict:n},children:e})}function oT(e){return typeof e=="function"}const WVe=new Set(["animate","exit","variants","initial","style","values","variants","transition","transformTemplate","custom","inherit","onBeforeLayoutMeasure","onAnimationStart","onAnimationComplete","onUpdate","onDragStart","onDrag","onDragEnd","onMeasureDragConstraints","onDirectionLock","onDragTransitionEnd","_dragX","_dragY","onHoverStart","onHoverEnd","onViewportEnter","onViewportLeave","globalTapTarget","ignoreStrict","viewport"]);function Rw(e){return e.startsWith("while")||e.startsWith("drag")&&e!=="draggable"||e.startsWith("layout")||e.startsWith("onTap")||e.startsWith("onPan")||e.startsWith("
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
linear-gradient(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"}),MWe=be({display:"block",fontFamily:"likec4.element",fontOpticalSizing:"auto",fontStyle:"normal",fontWeight:600,fontSize:"24px",lineHeight:"xs"}),$T="40px",PWe=be({flex:`0 0 ${$T}`,height:$T,width:$T,display:"flex",alignItems:"center",justifyContent:"center",alignSelf:"flex-start",cursor:"move",_dark:{mixBlendMode:"hard-light"},"& :where(svg, img)":{width:"100%",height:"auto",maxHeight:"100%",pointerEvents:"none",filter:`
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
drop-shadow(0 0 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"}]],MT=Nt("outline","chevron-down","ChevronDown",qWe),UWe=[["path",{d:"M9 6l6 6l-6 6",key:"svg-0"}]],qu=Nt("outline","chevron-right","ChevronRight",UWe);function EJ({children:e}){return y.jsx(y.Fragment,{children:e})}function SJ({value:e,isExpanded:r}){const[n,o]=E.useState(!1),a=E.useRef(null);return E.useEffect(()=>{a.current&&o(a.current.scrollWidth>a.current.clientWidth)},[e]),y.jsx(co,{label:n&&!r?e:null,multiline:!0,w:300,withinPortal:!0,children:y.jsx(ft,{ref:a,component:"div",className:be({fontSize:"sm",padding:"xs",userSelect:"all",color:"mantine.colors.text",lineHeight:1.4,whiteSpace:r?"pre-wrap":"nowrap",overflow:r?"visible":"hidden",textOverflow:r?"unset":"ellipsis",wordBreak:r?"break-word":"normal",minWidth:0,width:"100%"}),children:e})})}function WWe({values:e,isExpanded:r,onToggle:n}){return r?y.jsx(Xo,{gap:"xs",children:e.map((o,a)=>y.jsxs(mc,{align:"center",gap:"xs",children:[y.jsx(ft,{className:be({fontSize:"xs",color:"mantine.colors.gray[5]",fontWeight:500,flexShrink:0,_dark:{color:"mantine.colors.dark[3]"}}),children:"•"}),y.jsx(Re,{className:be({minHeight:"32px",display:"flex",alignItems:"center",flex:1}),children:y.jsx(SJ,{value:o,isExpanded:!0})})]},a))}):y.jsx(Re,{className:be({minHeight:"32px",display:"flex",alignItems:"center",padding:"xs",gap:"xs",flexWrap:"wrap",minWidth:0,overflow:"hidden"}),children:e.map((o,a)=>y.jsxs(mc,{align:"center",gap:"xs",style:{minWidth:0},children:[y.jsx
`)?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(MT,{size:12}):y.jsx(qu,{size:12})]})}):y.jsxs(ft,{component:"div",className:be({fontSize:"xs",color:"mantine.colors.dimmed",justifySelf:"end",textAlign:"right",userSelect:"none",whiteSpace:"nowrap",padding:"[4px 8px]",fontWeight:700}),children:[e,":"]}),y.jsx(Re,{className:be({justifySelf:"stretch",alignSelf:"start"}),children:o?y.jsx(WWe,{values:n,isExpanded:a,onToggle:s}):y.jsx(Re,{className:be({minHeight:"32px",display:"flex",alignItems:"center"}),children:y.jsx(SJ,{value:n[0]||"",isExpanded:a})})})]})}const GWe=be({"&[data-level='1']":{marginBottom:"sm"}}),XWe=be({cursor:"default",marginTop:"0",marginBottom:"0"}),CJ=be({transition:"fast",color:"mantine.colors.gray[7]",_dark:{color:"mantine.colors.dark[1]"},"& > *":{transition:"fast"},_hover:{transitionTimingFunction:"out","& > :not([data-no-transform])":{transitionTimingFunction:"out",transform:"translateX(1px)"}}}),KWe=et(CJ),ZWe=et(CJ,be({cursor:"pointer",width:"100%",justifyContent:"stretch",flexWrap:"nowrap",height:"36px",paddingInlineStart:"[16px]",paddingInlineEnd:"2.5",borderRadius:"sm",alignItems:"center",color:"mantine.colors.gray[7]",_dark:{color:"mantine.colors.gray.lightColor"},_hover:{background:"mantine.colors.gray.lightHover"},"& .tabler-icon":{transition:"fast",width:"90%",opacity:.65}})),QWe=[["path",{d:"M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0",key:"svg-0"}],["path",{d:"M12 9h.01",key:"svg-1"}],["path",{d:"M11 12h1v4h1",key:"svg-2"}]],PT=Nt("outline","info-circle","InfoCircle",QWe),JWe=[["path",{d:"M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0",key:"svg-0"}],["path",{d:"M12 12m-5 0a5 5 0 1 0 10 0a5 5 0 1 0 -10 0",key:"svg-1"}],["path",{d:"M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0",key:"svg-2"}]],eYe=Nt("outline","target","Target",JWe),tYe=[["path",{d:"M4 8v-2a2 2 0 0 1 2 -2h2",key:"svg-0"}],["path",{d:"M4 16v2a2 2 0 0 0 2 2h2",key:"svg-1"}],["path",{d:"M16 4h2a2 2 0 0 1 2 2v2",key:"svg-2"}],["path",{d:"M16 20h2a2 2 0 0 0 2 -2v-2",key:"svg-3"}],["path",{d:"M8 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0",key:"svg-4"}],["path",{d:"M16 16l-2.5 -2.5",key:"svg-5"}]],Ri=Nt("outline","zoom-scan","ZoomScan",tYe),rYe=({node:e})=>y.jsxs(pn,{className:KWe,gap:6,align:"baseline",wrap:"nowrap",children:[y.jsxs(ft,{component:"div",fz:11,c:"dimmed",children:[e.kind,":"]}),y.jsx(ft,{component:"div",fz:"sm",fw:"500",children:e.title})]}),nYe=({instance:e})=>{const r=Qt(),n=r.currentView.id,o=[...e.views()];return y.jsxs(pn,{className:ZWe,gap:4,children:[y.jsx(Ba,{color:"gray",variant:"transparent",size:"xs",flex:0,children:y.jsx(eYe,{stroke:1.2})}),y.jsx(ft,{component:"div",fz:"sm",fw:"500",flex:"1 1 100%",children:e.title}),y.jsxs(Re,{onClick:Cn,pos:"relative","data-no-transform":!0,flex:0,children:[o.length===0&&y.jsx(Kn,{size:"compact-xs",variant:"transparent",color:"gray",disabled:!0,children:"no views"}),o.length>0&&y.jsxs(hn,{shadow:"md",withinPortal:!1,position:"bottom-start",offset:0,closeOnClickOutside:!0,clickOutsideEvents:["pointerdown","mousedown","click"],closeOnEscape:!0,trapFocus:!0,children:[y.jsx(hn.Target,{children:y.jsxs(Kn,{size:"compact-xs",variant:"subtle",color:"gray",children:[o.length," vi
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
a ${a},${i} 0,0,0 ${-e} 0
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=Uu(o/2*n),s=e-2*i;return{path:`
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
M ${i},0
a ${i},${a} 0,0,0 0 ${o}
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},u)=>{if(e.isEmpty&&o)return null;const d=e.nonEmpty?e.isMarkdown?{dangerouslySetInnerHTML:{__html:e.html}}:{children:y.jsx("p",{children:e.text})}:{children:y.jsx(ft,{component:"span",fz:"xs",c:"dimmed",style:{userSelect:"none"},children:a})};return y.jsx(zr,{ref:u,...c,className:et(ZUe({uselikec4palette:n,value:e.isMarkdown?"markdown":"plaintext"}),i),style:{...s,...l&&{"--text-fz":`var(--font-sizes-${l}, var(--font-sizes-md))`},"--mantine-scale":r},...d})});Wp.displayName="Markdown";const Gee=E.forwardRef(({className:e,...r},n)=>y.jsx("div",{...r,ref:n,className:et(e,XUe(),"likec4-element")})),Xee=({data:e,...r})=>y.jsx(Xx,{element:e,...r}),Kee=E.forwardRef(({className:e,...r},n)=>y.jsx("div",{...r,className:et(e,"likec4-element-node-content"),ref:n})),Zee=E.forwardRef(({data:{title:e,style:r},className:n,...o},a)=>{const{size:i}=Jv(r),s=i==="sm"||i==="xs";return y.jsx(ft,{component:"div",...o,className:e
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
drop-shadow(0 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(u=>y.jsx(vl,{className:et(tJe),onMouseEnter:()=>{i(u),s.highlightNotation(e,u)},onMouseLeave:()=>{i(null),s.highlightNotation(e)},opacity:Vq(a)&&a!==u?.25:1,children:u},u))}),y.jsx(ft,{component:"div",fz:"sm",fw:500,lh:"1.25",style:{textWrap:"pretty"},children:r})]})]})})},sJe=e=>({id:e.view.id,notations:e.view.notation?.nodes??[]}),lJe=E.memo(()=>{const e=Iw(l=>l.height),{id:r,notations:n}=vs(sJe),[o,a]=c$e({key:"notation-webview-collapsed",defaultValue:!0}),i=n.length>0,s=qm();return y.jsxs(Qn,{children:[!i&&y.jsx(Ei.div,{initial:{opacity:.75,translateX:"50%"},animate:{opacity:1,translateX:0},exit:{translateX:"100%",opacity:.6},className:QA,children:y.jsx(co,{label:"View has no notations",color:"orange",...s,children:y.jsx(Ba,{size:"lg",variant:"light",color:"orange",radius:"md",children:y.jsx(zte,{})})})},"empty"),i&&o&&y.jsx(Ei.div,{initial:{opacity:.75,translateX:"50%"},animate:{opacity:1,translateX:0},exit:{translateX:"100%",opacity:.6},className:QA,children:y.jsx(co,{label:"Show notation",color:"dark",fz:"xs",...s,children:y.jsx(br,{size:"lg",variant:"default",color:"gray",className:ZQe,onClick:()=>a(!1),children:y.jsx(nJe,{stroke:1.5})})})},"collapsed"),i&&!o&&y.jsx(Ei.div,{initial:{opacity:.75,scale:.2},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.25},className:et("react-flow__panel",QA),style:{transformOrigin:"bottom right"},children:y.jsx(om,{radius:"sm",withBorder:!0,shadow:"lg",className:QQe,children:y.jsxs(Sp,{defaultValue:"first",radius:"xs",children:[y.jsxs(Y0,{children:[y.jsx(br,{size:"md",variant:"subtle",color:"gray",ml:2,style:{alignSelf:"center"},onClick:()=>a(!0),children:y.jsx(aJe,{stroke:2})}),y.jsx(pm,{value:"first",fz:"xs",children:"Elements"}),y.jsx(pm,{value:"second",fz:"xs",disabled:!0,children:"Relationships"})]}),y.jsx(yc,{value:"first",className:JQe,hidden:o,children:y.jsx(pa,{viewportProps:{style:{maxHeight:`min(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(uJe,{style:{backgroundColor:o},onClick:a=>{a.stopPropagation(),n()},children:"Close compare"})})}),uJe=Er.withProps({className:be({fontSize:"xs",fontWeight:"medium",py:"1.5",lineHeight:"1",borderBottomLeftRadius:"sm",borderBottomRightRadius:"sm",transform:"translateY(-4px)",px:"4",color:"mantine.colors.gray[
${_e.message}`)}else throw new Error(`Invalid target: "${ae}" is not a valid target from the root node. Did you mean ".${ae}"?`)})}function Gs(ee){const te=L(ee.config.target);return te?{target:te.map(ae=>typeof ae=="string"?Ol(ee.parent,ae):ae)}:ee.parent.initial}function Vo(ee){return ee.type==="history"}function wa(ee){const te=Xs(ee);for(const ae of te)for(const le of it(ae,ee))te.add(le);return te}function Xs(ee){const te=new Set;function ae(le){if(!te.has(le)){if(te.add(le),le.type==="compound")ae(le.initial.target[0]);else if(le.type==="parallel")for(const ue of Se(le))ae(ue)}}return ae(ee),te}function fo(ee,te){if(fr(te))return ee.machine.getStateNodeById(te);if(!ee.states)throw new Error(`Unable to retrieve child state '${te}' from '${ee.id}'; no child states exist.`);const ae=ee.states[te];if(!ae)throw new Error(`Child state '${te}' does not exist on '${ee.id}'`);return ae}function Ol(ee,te){if(typeof te=="string"&&fr(te))try{return ee.machine.getStateNodeById(te)}catch{}const ae=C(te).slice();let le=ee;for(;ae.length;){const ue=ae.shift();if(!ue.length)break;le=fo(le,ue)}return le}function jl(ee,te){if(typeof te=="string"){const ue=ee.states[te];if(!ue)throw new Error(`State '${te}' does not exist on '${ee.id}'`);return[ee,ue]}const ae=Object.keys(te),le=ae.map(ue=>fo(ee,ue)).filter(Boolean);return[ee.machine.root,ee].concat(le,ae.reduce((ue,_e)=>{const Be=fo(ee,_e);if(!Be)return ue;const Xe=jl(Be,te[_e]);return ue.concat(Xe)},[]))}function Bc(ee,te,ae,le){const ue=fo(ee,te).next(ae,le);return!ue||!ue.length?ee.next(ae,le):ue}function Ks(ee,te,ae,le){const ue=Object.keys(te),_e=fo(ee,ue[0]),Be=Ll(_e,te[ue[0]],ae,le);return!Be||!Be.length?ee.next(ae,le):Be}function Rh(ee,te,ae,le){const ue=[];for(const _e of Object.keys(te)){const Be=te[_e];if(!Be)continue;const Xe=fo(ee,_e),dt=Ll(Xe,Be,ae,le);dt&&ue.push(...dt)}return ue.length?ue:ee.next(ae,le)}function Ll(ee,te,ae,le){return typeof te=="string"?Bc(ee,te,ae,le):Object.keys(te).length===1?Ks(ee,te,ae,le):Rh(ee,te,ae,le)}function id(ee){return Object.keys(ee.states).map(te=>ee.states[te]).filter(te=>te.type==="history")}function ta(ee,te){let ae=ee;for(;ae.parent&&ae.parent!==te;)ae=ae.parent;return ae.parent===te}function Fc(ee,te){const ae=new Set(ee),le=new Set(te);for(const ue of ae)if(le.has(ue))return!0;for(const ue of le)if(ae.has(ue))return!0;return!1}function Bl(ee,te,ae){const le=new Set;for(const ue of ee){let _e=!1;const Be=new Set;for(const Xe of le)if(Fc(Wr([ue],te,ae),Wr([Xe],te,ae)))if(ta(ue.source,Xe.source))Be.add(Xe);else{_e=!0;break}if(!_e){for(const Xe of Be)le.delete(Xe);le.add(ue)}}return Array.from(le)}function sd(ee){const[te,...ae]=ee;for(const le of it(te,void 0))if(ae.every(ue=>ta(ue,le)))return le}function Fl(ee,te){if(!ee.target)return[];const ae=new Set;for(const le of ee.target)if(Vo(le))if(te[le.id])for(const ue of te[le.id])ae.add(ue);else for(const ue of Fl(Gs(le),te))ae.add(ue);else ae.add(le);return[...ae]}function ra(ee,te){const ae=Fl(ee,te);if(!ae)return;if(!ee.reenter&&ae.every(ue=>ue===ee.source||ta(ue,ee.source)))return ee.source;const le=sd(ae.concat(ee.source));if(le)return le;if(!ee.reenter)return ee.source.machine.root}function Wr(ee,te,ae){const le=new Set;for(const ue of ee)if(ue.target?.length){const _e=ra(ue,ae);ue.reenter&&ue.source===_e&&le.add(_e);for(const Be of te)ta(Be,_e)&&le.add(Be)}return[...le]}function Vn(ee,te){if(ee.length!==te.size)return!1;for(const ae of ee)if(!te.has(ae))return!1;return!0}function qo(ee,te,ae,le,ue,_e){if(!ee.length)return te;const Be=new Set(te._nodes);let Xe=te.historyValue;const dt=Bl(ee,Be,Xe);let gt=te;ue||([gt,Xe]=ji(gt,le,ae,dt,Be,Xe,_e,ae.actionExecutor)),gt=So(gt,le,ae,dt.flatMap(nt=>nt.actions),_e,void 0),gt=Hc(gt,le,ae,dt,Be,_e,Xe,ue);const Yt=[...Be];gt.status==="done"&&(gt=So(gt,le,ae,Yt.sort((nt,ot)=>ot.order-nt.order).flatMap(nt=>nt.exit),_e,void 0));try{return Xe===te.historyValue&&Vn(te._nodes,Be)?gt:nn(gt,{_nodes:Yt,historyValue:Xe})}catch(nt){throw nt}}function Zs(ee,te,ae,le,ue){if(le.output===void 0)return;const _e=h(ue.id,ue.output!==void 0&&ue.parent?N(u
${s} {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
--likec4-palette-fill: ${i(n.elements.fill)};
--likec4-palette-stroke: ${i(n.elements.stroke)};
}
${_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,urt+1).map(s=>drt(e,r,n,s))].join(`
`)}function hrt(e,r){return En(r.colors,M9(),Sn(([n,o])=>prt(e,n,o)),qq(`
`))}const frt=E.memo(({id:e})=>{const r=`#${e}`,n=yp()?.(),{theme:o}=cre(),a=hrt(r,o);return y.jsx("style",{type:"text/css","data-likec4-colors":e,dangerouslySetInnerHTML:{__html:a},nonce:n})});function Ene({children:e}){const r=E.useContext(a2);return E.useEffect(()=>{r||console.warn("LikeC4Diagram must be a child of MantineProvider")},[]),r?y.jsx(y.Fragment,{children:e}):y.jsx(i7,{defaultColorScheme:"auto",children:e})}Ene.displayName="EnsureMantine";const NR=({reducedMotion:e="user",children:r})=>{const n=yp()?.();return y.jsx(UVe,{features:FUe,strict:!0,children:y.jsx(GVe,{reducedMotion:e,...n&&{nonce:n},children:r})})};function Sne({onCanvasClick:e,onCanvasContextMenu:r,onCanvasDblClick:n,onEdgeClick:o,onChange:a,onEdgeContextMenu:i,onNavigateTo:s,onNodeClick:l,onNodeContextMenu:c,onOpenSource:u,onBurgerMenuClick:d,onLayoutTypeChange:h,onInitialized:f,view:g,className:b,readonly:x=!0,controls:w=!x,fitView:k=!0,fitViewPadding:C=w?Uw.withControls:Uw.default,pannable:_=!0,zoomable:T=!0,background:A="dots",enableElementTags:R=!1,enableFocusMode:D=!1,enableElementDetails:N=!1,enableRelationshipDetails:M=!1,enableRelationshipBrowser:O=!1,enableCompareWithLatest:F=!!h,nodesDraggable:L=!x,nodesSelectable:U=!x||D||!!s||!!l,enableNotations:P=!1,showNavigationButtons:V=!!s,enableDynamicViewWalkthrough:I=!1,dynamicViewVariant:H,enableSearch:q=!1,initialWidth:Z,initialHeight:W,reduceGraphics:G="auto",renderIcon:K,where:j,reactFlowProps:Y,renderNodes:Q,children:J}){const ie=UG(),ne=E.useRef(null),re=Ire(g,H),ge=mrt(C);ne.current==null&&(ne.current={defaultEdges:[],defaultNodes:[],initialWidth:Z??re.width,initialHeight:W??re.height,initialFitViewOptions:{maxZoom:zT,minZoom:_s,padding:ge},initialMaxZoom:zT,initialMinZoom:_s});const De=G==="auto"?_&&(re.width??1)*(re.height??1)>6e6&&g.nodes.some(he=>he.children?.length>0):G;return y.jsx(Ene,{children:y.jsx(NR,{...De&&{reducedMotion:"always"},children:y.jsx($Ee,{value:K??null,children:y.jsx(Np,{features:{enableFitView:k,enableReadOnly:x,enableFocusMode:D,enableNavigateTo:!!s,enableElementDetails:N,enableRelationshipDetails:M,enableRelationshipBrowser:O,enableSearch:q,enableNavigationButtons:V&&!!s,enableDynamicViewWalkthrough:g._type==="dynamic"&&I,enableNotations:P,enableVscode:!!u,enableControls:w,enableElementTags:R,enableCompareWithLatest:F&&!!h},children:y.jsxs(HKe,{handlers:{onCanvasClick:e,onCanvasContextMenu:r,onCanvasDblClick:n,onEdgeClick:o,onChange:a,onEdgeContextMenu:i,onNavigateTo:s,onNodeClick:l,onNodeContextMenu:c,onOpenSource:u,onBurgerMenuClick:d,onInitialized:f,onLayoutTypeChange:h},children:[y.jsx(frt,{id:ie}),y.jsx(oLe,{rootSelector:`#${ie}`,children:y.jsx(yje,{id:ie,className:b,reduceGraphics:De,children:y.jsx(O3,{fitView:k,...ne.current,children:y.jsxs(Ktt,{view:g,zoomable:T,pannable:_,fitViewPadding:ge,nodesDraggable:L,nodesSelectable:U,where:j??null,dynamicViewVariant:H,children:[y.jsx(met,{background:A,reactFlowProps:Y,renderNodes:Q,children:J}),y.jsx(Kte,{})]})})})})]})})})})})}const Cne=e=>typeof e=="number"?`${e}px`:e;function mrt(e){return jF(()=>T0(e)?zNe(e,Cne):Cne(e),[e],grt)}const grt=([e],[r])=>e===r||T0(e)&&T0(r)&&e.bottom==r.bottom&&e.left==r.left&&e.right==r.right&&e.top==r.top;function yrt({children:e,likec4model:r}){return y.jsx(K0.Provider,{value:r,children:e})}const DR=({children:e})=>y.jsx("div",{style:{margin:"1rem 0"},children:y.jsx("div",{style:{margin:"0 auto",display:"inline-block",padding:"2rem",background:"rgba(250,82,82,.15)",color:"#ffa8a8"},children:e})}),brt=({viewId:e})=>y.jsxs(DR,{children:["View ",y.jsx("code",{children:e})," not found"]}),vrt=e=>{throw new Error("LikeC4View is not available SSR")};var Tne={exports:{}},$R,Ane;function xrt(){if(Ane)return $R;Ane=1;var e="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";return $R=e,$R}var MR,Rne;function wrt(){if(Rne)return MR;Rne=1;var e=xrt();function r(){}function n(){}return n.resetWarningCache=r,MR=function(){function o(s,l,c,u,d,h){if(h!==e){var f=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to ca
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)},Nrt=function(e,r){return Crt(e)||Trt(e,r)||Art(e,r)||Rrt()},Mne=Dne((function(e){function r(){return e.exports=r=Object.assign||function(n){for(var o=1;o<arguments.length;o++){var a=arguments[o];for(var i in a)Object.prototype.hasOwnProperty.call(a,i)&&(n[i]=a[i])}return n},r.apply(this,arguments)}e.exports=r})),Drt=function(e,r){if(e==null)return{};var n,o,a={},i=Object.keys(e);for(o=0;o<i.length;o++)n=i[o],r.indexOf(n)>=0||(a[n]=e[n]);return a},Pne=function(e,r){if(e==null)return{};var n,o,a=Drt(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)n=i[o],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a},$rt=E.createContext(null);function zne(e){var r=e.children,n=r===void 0?"":r,o=Pne(e,["children"]);return typeof n!="string"&&(n=vrt()),dn.createElement("template",Mne({},o,{dangerouslySetInnerHTML:{__html:n}}))}function Ine(e){var r=e.root,n=e.children;return Ki.createPortal(n===void 0?null:n,r)}function Mrt(e){var r=E.forwardRef((function(n,o){var a,i,s=n.mode,l=s===void 0?"open":s,c=n.delegatesFocus,u=c!==void 0&&c,d=n.styleSheets,h=d===void 0?[]:d,f=n.ssr,g=f!==void 0&&f,b=n.children,x=Pne(n,["mode","delegatesFocus","styleSheets","ssr","children"]),w=(i=E.useRef((a=o)&&a.current),E.useEffect((function(){a&&(a.current=i.current)}),[a]),i),k=E.useState(null),C=Nrt(k,2),_=C[0],T=C[1],A="node_".concat(l).concat(u);return E.useLayoutEffect((function(){if(w.current)try{if(typeof o=="function"&&o(w.current),g){var R=w.current.shadowRoot;return void T(R)}var D=w.current.attachShadow({mode:l,delegatesFocus:u});h.length>0&&(D.adoptedStyleSheets=h),T(D)}catch(N){(function(M){var O=M.error,F=M.styleSheets,L=M.root;switch(O.name){case"NotSupportedError":F.length>0&&(L.adoptedStyleSheets=F);break;default:throw O}})({error:N,styleSheets:h,root:_})}}),[o,w,h]),dn.createElement(dn.Fragment,null,dn.createElement(e.tag,Mne({key:A,ref:w},x),(_||g)&&dn.createElement($rt.Provider,{value:_},g?dn.createElement(zne,{shadowroot:l,shadowrootmode:l},e.render({root:_,ssr:g,children:b})):dn.createElement(Ine,{root:_},e.render({root:_,ssr:g,children:b})))))}));return r.propTypes={mode:Rs.oneOf(["open","closed"]),delegatesFocus:Rs.bool,styleSheets:Rs.arrayOf(Rs.instanceOf(globalThis.CSSStyleSheet)),ssr:Rs.bool,children:Rs.node},r}zne.propTypes={children:Rs.oneOfType([Rs.string,Rs.node])},Ine.propTypes={root:Rs.object.isRequired,children:Rs.node};var PR=new Map;function Prt(){var e=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},r=arguments.length>1&&arguments[1]!==void 0?arguments[1]:"core",n=arguments.length>2&&arguments[2]!==void 0?arguments[2]:function(o){return o.children};return new Proxy(e,{get:function(o,a){var i=Srt(a,{separator:"-"}),s="".concat(r,"-").concat(i);return PR.has(s)||PR.set(s,Mrt({tag:i,render:n})),PR.get(s)}})}var zrt=Prt();const Irt='@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:400;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-400-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-400-normal.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:500;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-500-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-500-normal.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:600;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-600-normal.woff2) format
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
:where([data-likec4-instance="${e}"]) {
display: block;
box-sizing: border-box;
border: 0 solid transparent;
background: transparent;
padding: 0;
margin: 0;
overflow: hidden;
width: 100%;
height: 100%;
min-width: 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(),u=Frt(c,i),d=E.useRef(null),h=jrt(n,o),f=E.useCallback(()=>d.current??void 0,[d]),g=kt(()=>{if(F3(o)){if(typeof o=="string")return o;if(typeof o=="function")return o()}return""});let b=F3(o)?g():void 0;return y.jsxs(y.Fragment,{children:[y.jsx("style",{type:"text/css",nonce:b,dangerouslySetInnerHTML:{__html:u}}),y.jsx(Brt,{ssr:!1,...s,styleSheets:h,"data-likec4-instance":c,children:y.jsx("div",{ref:d,"data-mantine-color-scheme":l,className:"likec4-shadow-root",children:y.jsx(i7,{...a&&{forceColorScheme:a},defaultColorScheme:l,getRootElement:f,...!!b&&{getStyleNonce:g},cssVariablesSelector:".likec4-shadow-root",theme:r,children:y.jsx(NR,{children:e})})})})]})}const Vrt=be({cursor:"pointer","--mantine-cursor-pointer":"pointer","& :where(.likec4-diagram, .likec4-compound-node, .likec4-element-node)":{cursor:"pointer"}});function qrt({viewId:e,className:r,pannable:n=!1,zoomable:o=!1,keepAspectRatio:a=!0,colorScheme:i,injectFontCss:s=!0,controls:l=!1,background:c="transparent",browser:u=!0,showNavigationButtons:d=!1,enableNotations:h,enableFocusMode:f=!1,enableDynamicViewWalkthrough:g=!1,enableElementDetails:b=!1,enableRelationshipDetails:x=!1,enableRelationshipBrowser:w=x,reduceGraphics:k="auto",mantineTheme:C,styleNonce:_,style:T,reactFlowProps:A,renderNodes:R,children:D,...N}){const M=Jje(),[O,F]=E.useState("manual"),[L,U]=E.useState(null),P=kt(Y=>{Y&&Y!==L&&F("manual"),U(Y)}),V=kt(()=>{P(e)});if(!M)return y.jsx(DR,{children:"LikeC4Model not found. Make sure you provided LikeC4ModelProvider."});const I=M.findView(e)?.$layouted;if(!I)return y.jsx(brt,{viewId:e});if(I._stage!=="layouted")return y.jsxs(DR,{children:['LikeC4 View "$',e,'" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.']});const H=L?M.findView(L):null,q=O==="manual"?H?.$layouted:H?.$view,Z=!!h&&(I.notation?.nodes?.length??0)>0,W=(q?.notation?.nodes?.length??0)>0,G=u!==!1,K=Hq(u)?{}:u,j=Ire(I,N.dynamicViewVariant);return y.jsx(Hrt,{injectFontCss:s,theme:C,colorScheme:i,styleNonce:_,keepAspectRatio:a?j:!1,className:et("likec4-view",r),style:T,children:y.jsxs(NR,{children:[y.jsx(Sne,{view:I,readonly:!0,pannable:n,zoomable:o,background:c,fitView:!0,fitViewPadding:Uw.default,enableNotations:Z,enableDynamicViewWalkthrough:g,showNavigationButtons:d,enableCompareWithLatest:!1,enableFocusMode:f,enableRelationshipDetails:x,enableElementDetails:b,enableRelationshipBrowser:w,enableElementTags:!1,controls:l,nodesDraggable:!1,reduceGraphics:k,className:et("likec4-static-view",G&&Vrt),enableSearch:!1,...G&&{onCanvasClick:V,onNodeClick:V},reactFlowProps:A,renderNodes:R,children:D,...N}),q&&y.jsxs(Ly,{openDelay:0,onClose:()=>P(null),children:[y.jsx(Sne,{view:q,pannable:!0,zoomable:!0,background:"dots",onNavigateTo:P,showNavigationButtons:!0,enableDynamicViewWalkthrough:!0,enableFocusMode:!0,enableRelationshipBrowser:!0,enableElementDetails:!0,enableRelationshipDetails:!0,enableSearch:!0,enableElementTags:!0,enableCompareWithLatest:!0,controls:!0,readonly:!0,nodesDraggable:!1,fitView:!0,...N,fitViewPadding:Uw.withControls,...K,enableNotations:W&&(K.enableNotations??!0),renderNodes:R,onLayoutTypeChange:F}),y.jsx(zr,{pos:"absolute",top:"4",right:"4",zIndex:"999",children:y.jsx(br,{variant:"default",color:"gray",onClick:Y=>{Y.stopPropagation(),P(null)},children:y.jsx(Rp,{})})})]})]})})}var Urt=e=>y.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 128 128",...e,children:[y.jsx("path",{fill:"#343741",d:"M4 64c0 5.535.777 10.879 2.098 16H84c8.836 0 16-7.164 16-16s-7.164-16-16-16H6.098A63.7 63.7 0 0 0 4 64"}),y.jsx("path",{fill:"#fec514",d:"M111.695 30.648A61.5 61.5 0 0 0 117.922 24C106.188 9.379 88.199 0 68 0 42.715 0 20.957 14.71 10.574 36H98.04a20.12 20.12 0 0 0 13.652-5.352"}),y.jsx("path",{fill:"#00bfb3",d:"M98.04 92H10.577C20.961 113.29 42.715 128 68 128c20.2 0 38.188-9.383 49.922-24a61 61 0 0 0-6.227-6.648A20.13 20.13 0 0 0 98.04 92"})]}),Wrt=e=>y.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewB
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
addressing a growing number of use cases. It centrally stores your data so you can
discover the expected and uncover the unexpected.`},title:"Elasticsearch",kind:"container",id:"elasticsearch"},objectstorage:{style:{opacity:20},technology:"S3 Object Storage",description:{txt:"s3 Object Storage"},title:"s3 Object Storage",kind:"container",id:"objectstorage"},postgres:{style:{opacity:20,icon:"tech:postgresql"},technology:"PostgreSQL",description:{txt:`PostgreSQL is a powerful, open source object-relational database system.
It has more than 15 years of active development and a proven architecture
that has earned it a strong reputation for reliability, data integrity,
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.
refactor(architecture): reorganize LikeC4 projects and consolidate webcomponents Renamed resources/likec4 to resources/edp-likec4 to better reflect that this directory contains the Enterprise Developer Platform architecture models, not documentation platform architecture. Extended element kinds in edp-likec4/models/spec.c4 to support documentation platform modeling: - Added person, tool, process, repository element kinds - These allow modeling of documentation workflows and processes Consolidated webcomponent generation: - Combined both architecture projects (edp-likec4 and doc-likec4) into a single webcomponent output at static/js/likec4-webcomponent.js - Updated Taskfile.yml to generate from edp-likec4 directory - Removed duplicate webcomponent script loading in head-end.html - Fixed CustomElementRegistry duplicate registration issue Embedded TeleNeoOffice corporate fonts: - Added font files to static/fonts/ and static/ root - Required for correct rendering of diagrams in webcomponent - Fonts are embedded in webcomponent but also served from Hugo static paths - Fixed 404 errors for font loading Updated architecture documentation: - Fixed markdown linting issues (trailing spaces, fence spacing) - Updated all references from resources/likec4 to resources/edp-likec4 - Enhanced setup.md with correct directory structure This refactoring enables: 1. Clear separation between EDP architecture and documentation platform models 2. Single consolidated webcomponent containing all architecture views 3. Proper font loading for corporate branding in diagrams 4. Foundation for future architecture documentation expansion Breaking changes: None (paths updated in documentation)
2025-11-07 11:50:17 +01:00
Optionally we will have a WebUI/API/CLI`},tags:[],style:{opacity:15,size:"md"},depth:1,x:855,y:79,width:870,height:981,labelBBox:{x:6,y:0,width:280,height:15}},{id:"local.ingressNginx",parent:"local",level:1,children:["local.ingressNginx.ingressNginx"],inEdges:[],outEdges:["15juth8","p2br4p","o229dq","2vnvvg","4ix58c","1hr2s5j","1nksp5g","m2japo","4drflo","ihlgsc"],deploymentRef:"local.ingressNginx",title:"ingress-nginx",kind:"namespace",color:"primary",shape:"rectangle",modelRef:"edp.ingressNginx.ingressNginx",icon:"tech:nginx",tags:[],style:{opacity:15,size:"md"},depth:1,x:4970,y:97,width:384,height:265,labelBBox:{x:6,y:0,width:92,height:15}},{id:"local.velero",parent:"local",level:1,children:["local.velero.velero"],inEdges:[],outEdges:["3znaik"],deploymentRef:"local.velero",title:"Velero",kind:"namespace",color:"primary",shape:"rectangle",modelRef:"edp.velero.velero",tags:[],style:{opacity:15,size:"md"},depth:1,x:8255,y:97,width:384,height:265,labelBBox:{x:6,y:0,width:49,height:15}},{id:"otc-edpFoundry.forgejoRunnerInfrastructure",parent:"otc-edpFoundry",level:1,children:[],inEdges:[],outEdges:["109g3jm"],deploymentRef:"otc-edpFoundry.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"primary",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},x:920,y:150,width:342,height:180,labelBBox:{x:18,y:54,width:306,height:66}},{id:"local.crossplane",parent:"local",level:1,children:["local.crossplane.crossplane","local.crossplane.crossplaneFunction","local.crossplane.crossplaneRbacManager","local.crossplane.providerArgoCD","local.crossplane.providerKind","local.crossplane.providerShell"],inEdges:[],outEdges:[],deploymentRef:"local.crossplane",title:"crossplane-system",kind:"namespace",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:8689,y:79,width:2670,height:301,labelBBox:{x:6,y:0,width:129,height:15}},{id:"local.crossplane.crossplane",parent:"local.crossplane",level:2,children:[],inEdges:[],outEdges:[],kind:"instance",title:"Crossplane",tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.crossplane.crossplane",modelRef:"edp.crossplane.crossplane",x:8739,y:150,width:320,height:180,labelBBox:{x:107,y:74,width:105,height:24}},{id:"local.crossplane.crossplaneFunction",parent:"local.crossplane",level:2,children:[],inEdges:[],outEdges:[],kind:"instance",title:"Function Patch and Transform",tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.crossplane.crossplaneFunction",modelRef:"edp.crossplane.crossplaneFunction",x:9189,y:150,width:320,height:180,labelBBox:{x:24,y:74,width:273,height:24}},{id:"local.crossplane.crossplaneRbacManager",parent:"local.crossplane",level:2,children:[],inEdges:[],outEdges:[],kind:"instance",title:"RBAC Manager",tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.crossplane.crossplaneRbacManager",modelRef:"edp.crossplane.crossplaneRbacManager",x:9639,y:150,width:320,height:180,labelBBox:{x:88,y:74,width:144,height:24}},{id:"local.crossplane.providerArgoCD",parent:"local.crossplane",level:2,children:[],inEdges:[],outEdges:[],kind:"instance",title:"ArgoCD Provider",tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.crossplane.providerArgoCD",modelRef:"edp.crossplane.providerArgoCD",x:10089,y:150,width:320,height:180,labelBBox:{x:82,y:74,width:155,height:24}},{id:"local.crossplane.providerKind",parent:"local.crossplane",level:2,children:[],inEdges:[],outEdges:[],kind:"instance",title:"Kind Provider",tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.crossplane.providerKind",modelRef:"edp.crossplane.providerKind",x:10539,y:150,width:320,height:180,labelBBox:{x:98,y:74,width:124,height:24}},{id:"local.crossplane.providerShell",parent:"local.crossplane",level:2,children:[],inEdges:[],outEdges:[],kind:"instance",title:"Shel
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
offering capabilities like
code version controling
collaboration and ticketing
refactor(architecture): reorganize LikeC4 projects and consolidate webcomponents Renamed resources/likec4 to resources/edp-likec4 to better reflect that this directory contains the Enterprise Developer Platform architecture models, not documentation platform architecture. Extended element kinds in edp-likec4/models/spec.c4 to support documentation platform modeling: - Added person, tool, process, repository element kinds - These allow modeling of documentation workflows and processes Consolidated webcomponent generation: - Combined both architecture projects (edp-likec4 and doc-likec4) into a single webcomponent output at static/js/likec4-webcomponent.js - Updated Taskfile.yml to generate from edp-likec4 directory - Removed duplicate webcomponent script loading in head-end.html - Fixed CustomElementRegistry duplicate registration issue Embedded TeleNeoOffice corporate fonts: - Added font files to static/fonts/ and static/ root - Required for correct rendering of diagrams in webcomponent - Fonts are embedded in webcomponent but also served from Hugo static paths - Fixed 404 errors for font loading Updated architecture documentation: - Fixed markdown linting issues (trailing spaces, fence spacing) - Updated all references from resources/likec4 to resources/edp-likec4 - Enhanced setup.md with correct directory structure This refactoring enables: 1. Clear separation between EDP architecture and documentation platform models 2. Single consolidated webcomponent containing all architecture views 3. Proper font loading for corporate branding in diagrams 4. Foundation for future architecture documentation expansion Breaking changes: None (paths updated in documentation)
2025-11-07 11:50:17 +01:00
and security scanning`},technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"local.gitea.forgejo",modelRef:"edp.forgejo",navigateTo:"forgejo",x:7363,y:497,width:340,height:180,labelBBox:{x:46,y:18,width:278,height:139}},{id:"local.keycloak.keycloak",parent:"local.keycloak",level:2,children:[],inEdges:["2vnvvg"],outEdges:["4zwy1m"],kind:"instance",title:"Keycloak",technology:"Java",tags:[],icon:"tech:java",color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.keycloak.keycloak",modelRef:"edp.keycloak.keycloak",x:2367,y:497,width:320,height:180,labelBBox:{x:104,y:65,width:143,height:45}},{id:"local.monitoring.alloy",parent:"local.monitoring",level:2,children:[],inEdges:["1hr2s5j"],outEdges:["sb2j38"],kind:"instance",title:"Alloy",description:{txt:"Open Telemetry Collector"},tags:[],icon:"tech:grafana",color:"primary",shape:"rectangle",style:{opacity:15,size:"md",multiple:!0},deploymentRef:"local.monitoring.alloy",modelRef:"edp.monitoring.alloy",x:3737,y:497,width:320,height:180,labelBBox:{x:59,y:63,width:233,height:48}},{id:"local.monitoring.queryFrontend",parent:"local.monitoring",level:2,children:[],inEdges:["1nksp5g"],outEdges:[],kind:"instance",title:"Query Frontend",tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.monitoring.queryFrontend",modelRef:"edp.monitoring.loki.queryFrontend",x:3287,y:497,width:320,height:180,labelBBox:{x:88,y:74,width:144,height:24}},{id:"local.openbao.openbao",parent:"local.openbao",level:2,children:[],inEdges:["m2japo"],outEdges:[],kind:"instance",title:"Openbao",technology:"Openbao",tags:[],color:"primary",shape:"storage",style:{opacity:15,size:"md"},deploymentRef:"local.openbao.openbao",modelRef:"edp.openbao.openbao",x:7835,y:497,width:320,height:180,labelBBox:{x:117,y:65,width:86,height:45}},{id:"local.openbao.agentInjector",parent:"local.openbao",level:2,children:[],inEdges:[],outEdges:[],kind:"instance",title:"Agent Injector",tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.openbao.agentInjector",modelRef:"edp.openbao.agentInjector",x:7835,y:150,width:320,height:180,labelBBox:{x:96,y:74,width:127,height:24}},{id:"local.fibonacci.fibonacci",parent:"local.fibonacci",level:2,children:[],inEdges:["4drflo"],outEdges:[],kind:"instance",title:"Fibonacci",technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.fibonacci.fibonacci",modelRef:"edp.testApp.fibonacci",x:4189,y:497,width:320,height:180,labelBBox:{x:101,y:65,width:148,height:45}},{id:"local.mailhog.mailhog",parent:"local.mailhog",level:2,children:[],inEdges:["ihlgsc"],outEdges:[],kind:"instance",title:"Mailhog",technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.mailhog.mailhog",modelRef:"edp.mailhog.mailhog",x:4639,y:497,width:320,height:180,labelBBox:{x:109,y:65,width:132,height:45}},{id:"local.minio.minio",parent:"local.minio",level:2,children:[],inEdges:["3znaik","4ix58c"],outEdges:[],kind:"instance",title:"S3 Blob Storage",technology:"Minio",tags:[],color:"primary",shape:"storage",style:{opacity:15,size:"md"},deploymentRef:"local.minio.minio",modelRef:"edp.minio.minio",x:8287,y:497,width:320,height:180,labelBBox:{x:85,y:65,width:150,height:45}},{id:"otc-edp-per-tenant",parent:null,level:0,children:["otc-edp-per-tenant.forgejoRunnerInfrastructure","otc-edp-per-tenant.cce","otc-edp-per-tenant.cloudServices"],inEdges:["r3wxut","1sng0q0","e3benz"],outEdges:[],deploymentRef:"otc-edp-per-tenant",title:"OTC EDP per tenant cluster",kind:"cloud",technology:"OTC",color:"primary",shape:"rectangle",description:{txt:`OTC environment for EDP. EDP is the environment a customer gets from us.
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
refactor(architecture): reorganize LikeC4 projects and consolidate webcomponents Renamed resources/likec4 to resources/edp-likec4 to better reflect that this directory contains the Enterprise Developer Platform architecture models, not documentation platform architecture. Extended element kinds in edp-likec4/models/spec.c4 to support documentation platform modeling: - Added person, tool, process, repository element kinds - These allow modeling of documentation workflows and processes Consolidated webcomponent generation: - Combined both architecture projects (edp-likec4 and doc-likec4) into a single webcomponent output at static/js/likec4-webcomponent.js - Updated Taskfile.yml to generate from edp-likec4 directory - Removed duplicate webcomponent script loading in head-end.html - Fixed CustomElementRegistry duplicate registration issue Embedded TeleNeoOffice corporate fonts: - Added font files to static/fonts/ and static/ root - Required for correct rendering of diagrams in webcomponent - Fonts are embedded in webcomponent but also served from Hugo static paths - Fixed 404 errors for font loading Updated architecture documentation: - Fixed markdown linting issues (trailing spaces, fence spacing) - Updated all references from resources/likec4 to resources/edp-likec4 - Enhanced setup.md with correct directory structure This refactoring enables: 1. Clear separation between EDP architecture and documentation platform models 2. Single consolidated webcomponent containing all architecture views 3. Proper font loading for corporate branding in diagrams 4. Foundation for future architecture documentation expansion Breaking changes: None (paths updated in documentation)
2025-11-07 11:50:17 +01:00
This is kubernetes clusters and other infrastructure like nodes and vms, and platform services. All is set up by IaC-pipelines in the Foundry.`},tags:[],style:{opacity:15,size:"md"},depth:1,x:1775,y:79,width:442,height:1668,labelBBox:{x:6,y:0,width:181,height:15}},{id:"local.backstage.database",parent:"local.backstage",level:2,children:[],inEdges:["19kg5y"],outEdges:[],kind:"instance",title:"Database",technology:"Postgresql",tags:[],icon:"tech:postgresql",color:"primary",shape:"storage",style:{opacity:15,size:"md"},deploymentRef:"local.backstage.database",modelRef:"edp.ui.database",x:5091,y:830,width:320,height:180,labelBBox:{x:101,y:64,width:148,height:46}},{id:"local.argocd.argocdRedis",parent:"local.argocd",level:2,children:[],inEdges:["1gfgfhk","qfu5xm","g7xnzs","fon3rk"],outEdges:[],kind:"instance",title:"Redis",technology:"Redis",tags:[],icon:"tech:redis",color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.argocd.argocdRedis",modelRef:"edp.argoCD.argocdRedis",x:6686,y:830,width:320,height:180,labelBBox:{x:119,y:64,width:113,height:46}},{id:"local.keycloak.keycloakDB",parent:"local.keycloak",level:2,children:[],inEdges:["4zwy1m"],outEdges:[],kind:"instance",title:"Database",technology:"Postgresql",tags:[],icon:"tech:postgresql",color:"primary",shape:"storage",style:{opacity:15,size:"md"},deploymentRef:"local.keycloak.keycloakDB",modelRef:"edp.keycloak.keycloakDB",x:2367,y:830,width:320,height:180,labelBBox:{x:101,y:64,width:148,height:46}},{id:"local.monitoring.distributor",parent:"local.monitoring",level:2,children:[],inEdges:["sb2j38"],outEdges:[],kind:"instance",title:"Distributor",tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.monitoring.distributor",modelRef:"edp.monitoring.loki.distributor",x:3737,y:830,width:320,height:180,labelBBox:{x:112,y:74,width:95,height:24}},{id:"otc-edp-per-tenant.forgejoRunnerInfrastructure",parent:"otc-edp-per-tenant",level:1,children:[],inEdges:[],outEdges:["fkkf8y"],deploymentRef:"otc-edp-per-tenant.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"primary",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},x:1825,y:150,width:342,height:180,labelBBox:{x:18,y:54,width:306,height:66}},{id:"otc-edp-per-tenant.cce",parent:"otc-edp-per-tenant",level:1,children:[],inEdges:["fkkf8y","r3wxut","1sng0q0"],outEdges:["pit45i"],deploymentRef:"otc-edp-per-tenant.cce",title:"OTC CCE",kind:"kubernetes",technology:"Kubernetes",color:"primary",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"OTC Container Cluster Engine"},tags:[],style:{opacity:15,size:"md"},x:1828,y:1206,width:327,height:180,labelBBox:{x:46,y:53,width:266,height:67}},{id:"otc-edp-per-tenant.cloudServices",parent:"otc-edp-per-tenant",level:1,children:[],inEdges:["pit45i","e3benz"],outEdges:[],deploymentRef:"otc-edp-per-tenant.cloudServices",title:"EDP Cloud Services",kind:"paas",technology:"Cloud Services",color:"primary",shape:"rectangle",description:{txt:"EDP Cloud Services"},tags:[],style:{opacity:15,size:"md"},x:1832,y:1517,width:320,height:180,labelBBox:{x:67,y:53,width:185,height:67}},{id:"local.spark.sparkoperator",parent:"local",level:1,children:[],inEdges:[],outEdges:[],kind:"instance",title:"Spark Operator",technology:"Spark",tags:[],icon:"tech:spark",color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.spark.sparkoperator",modelRef:"edp.spark.sparkoperator",x:12809,y:150,width:320,height:180,labelBBox:{x:76,y:65,width:198,height:45}}],edges:[{id:"pit45i",source:"otc-edp-per-tenant.cce",target:"otc-edp-per-tenant.cloudServices",label:null,dotpos:"e,1992,1517.1 1992,1386 1992,1423.8 1992,1468 1992,1506.9",points:[[1992,1386],[1992,1424],[1992,1468],[1992,1507]],labelBBox:null,parent:"otc-edp-per-tenant",relations:["1fzhjm9","15njmlz","hks76r","1w18ve8"],color:"gray",line:"dashed",head:"normal"},{id:"fkkf8y",source:"otc-edp-per-tenant.forgejoRun
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
This is kubernetes clusters and other infrastructure like nodes and vms, and platform services. All is set up by IaC-pipelines in the Foundry.`},tags:[],style:{opacity:15,size:"md"},depth:3,x:8,y:8,width:1994,height:1159,labelBBox:{x:6,y:0,width:181,height:15}},{id:"otc-edp-per-tenant.forgejoRunnerInfrastructure",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner"],inEdges:[],outEdges:["1dcszi5"],deploymentRef:"otc-edp-per-tenant.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"primary",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},depth:1,x:321,y:150,width:384,height:266,labelBBox:{x:6,y:0,width:235,height:15}},{id:"otc-edp-per-tenant.cce",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.cce.edp"],inEdges:["1dcszi5"],outEdges:["8msu1q","120qe5o","ealiax","1trj5u6"],deploymentRef:"otc-edp-per-tenant.cce",title:"OTC CCE",kind:"kubernetes",technology:"Kubernetes",color:"red",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"OTC Container Cluster Engine"},tags:[],style:{opacity:15,size:"md"},depth:2,x:755,y:79,width:954,height:719,labelBBox:{x:6,y:0,width:54,height:15}},{id:"otc-edp-per-tenant.cce.edp",parent:"otc-edp-per-tenant.cce",level:2,children:["otc-edp-per-tenant.cce.edp.externalSecrets","otc-edp-per-tenant.cce.edp.ingressNginx","otc-edp-per-tenant.cce.edp.argoCD","otc-edp-per-tenant.cce.edp.forgejo"],inEdges:["1dcszi5"],outEdges:["8msu1q","120qe5o","ealiax","1trj5u6"],deploymentRef:"otc-edp-per-tenant.cce.edp",title:"EDP",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:787,y:132,width:890,height:634,labelBBox:{x:6,y:0,width:27,height:15}},{id:"otc-edp-per-tenant.cce.edp.externalSecrets",parent:"otc-edp-per-tenant.cce.edp",level:3,children:[],inEdges:[],outEdges:[],kind:"instance",title:"external-secrets",description:{txt:"Provider to access externally stored Kubernetes secrets"},tags:["internal"],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.externalSecrets",modelRef:"edp.externalSecrets",navigateTo:"externalSecrets",x:837,y:204,width:320,height:180,labelBBox:{x:39,y:54,width:242,height:65}},{id:"otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner",parent:"otc-edp-per-tenant.forgejoRunnerInfrastructure",level:2,children:[],inEdges:[],outEdges:["1dcszi5"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:353,y:204,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edp-per-tenant.cce.edp.ingressNginx",parent:"otc-edp-per-tenant.cce.edp",level:3,children:[],inEdges:[],outEdges:["1ir70dd","1kr1wg1"],kind:"instance",title:"Ingress",description:{txt:"Ingress Controller for incoming http(s) traffic"},tags:["internal"],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.ingressNginx",modelRef:"edp.ingressNginx",navigateTo:"ingressNginx",x:1287,y:204,width:320,height:180,labelBBox:{x:33,y:54,width:255,height:65}},{id:"otc-edp-per-tenant.cce.edp.argoCD",parent:"otc-edp-per-tenant.cce.edp",level:3,children:[],inEdges:["1ir70dd"],outEdges:[],kind:"instance",title:"ArgoCD",description:{txt:"GitOps Service"},tags:[],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.argoCD",modelRef:"edp.argoCD",navigateTo:"argoCD",x:1307,y:536,width:320,height:180,labelBBox:{x:108,y:63,width:105,height:48}},{id:"otc-edp-per-tenant.cce.edp.forgejo",parent:"otc-edp-per-tenant.cce.edp",level:3,children:[],inEdges:["1kr1wg1","1dcszi5"],outE
offering capabilities like
code version controling
collaboration and ticketing
and security scanning`},technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.forgejo",modelRef:"edp.forgejo",navigateTo:"forgejo",x:837,y:536,width:340,height:180,labelBBox:{x:46,y:18,width:278,height:139}},{id:"otc-edp-per-tenant.cloudServices",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.cloudServices.postgres","otc-edp-per-tenant.cloudServices.redis","otc-edp-per-tenant.cloudServices.objectstorage","otc-edp-per-tenant.cloudServices.elasticsearch"],inEdges:["8msu1q","120qe5o","ealiax","1trj5u6"],outEdges:[],deploymentRef:"otc-edp-per-tenant.cloudServices",title:"EDP Cloud Services",kind:"paas",technology:"Cloud Services",color:"primary",shape:"rectangle",description:{txt:"EDP Cloud Services"},tags:[],style:{opacity:15,size:"md"},depth:1,x:58,y:815,width:1894,height:302,labelBBox:{x:6,y:0,width:127,height:15}},{id:"otc-edp-per-tenant.cloudServices.postgres",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["8msu1q"],outEdges:[],kind:"instance",title:"PostgreSQL",description:{txt:`PostgreSQL is a powerful, open source object-relational database system.
It has more than 15 years of active development and a proven architecture
that has earned it a strong reputation for reliability, data integrity,
and correctness.`},technology:"PostgreSQL",tags:[],icon:"tech:postgresql",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.postgres",modelRef:"postgres",x:108,y:887,width:354,height:180,labelBBox:{x:46,y:17,width:292,height:139}},{id:"otc-edp-per-tenant.cloudServices.redis",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["120qe5o"],outEdges:[],kind:"instance",title:"Redis",description:{txt:"Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker."},technology:"Redis",tags:[],icon:"tech:redis",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.redis",modelRef:"redis",x:592,y:887,width:359,height:180,labelBBox:{x:47,y:26,width:297,height:121}},{id:"otc-edp-per-tenant.cloudServices.objectstorage",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["ealiax"],outEdges:[],kind:"instance",title:"s3 Object Storage",description:{txt:"s3 Object Storage"},technology:"S3 Object Storage",tags:[],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.objectstorage",modelRef:"objectstorage",x:1082,y:887,width:320,height:180,labelBBox:{x:78,y:53,width:164,height:67}},{id:"otc-edp-per-tenant.cloudServices.elasticsearch",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["1trj5u6"],outEdges:[],kind:"instance",title:"Elasticsearch",description:{txt:`Elasticsearch is a distributed, RESTful search and analytics engine capable of
addressing a growing number of use cases. It centrally stores your data so you can
discover the expected and uncover the unexpected.`},technology:"Elasticsearch",tags:[],icon:"tech:elasticsearch",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.elasticsearch",modelRef:"elasticsearch",x:1532,y:887,width:370,height:180,labelBBox:{x:46,y:17,width:308,height:139}}],edges:[{id:"1ir70dd",source:"otc-edp-per-tenant.cce.edp.ingressNginx",target:"otc-edp-per-tenant.cce.edp.argoCD",label:"https",dotpos:"e,1461.6,536.51 1452.4,383.25 1455,427.28 1458.2,480.64 1461,526.05",points:[[1452,383],[1455,427],[1458,481],[1461,526]],labelBBox:{x:1459,y:448,width:34,height:18},parent:"otc-edp-per-tenant.cce.edp",relations:["1yssos5"],color:"gray",line:"dashed",head:"normal"},{id:"1kr1wg1",source:"otc-edp-per-tenant.cce.edp.ingressNginx",target:"otc-edp-per-tenant.cce.edp.forgejo",label:"https",dotpos:"e,1125.1,536.62 1328.8,383.47 1268.4,428.89 1194.8,484.19 1133.3,530.44",points:[[1329,383],[1268,429],[1195,484],[1133,530]],labelBBox:{x:1241,y:448,width:34,height:18},parent:"otc-edp-per-tenant.cce.edp",relations:["123efwn"],color:"gray",line:"dashed",head:"normal"},{id:"1dcszi5",source:"otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner",target:"otc-edp-per-tenant.cce.edp.forgejo",label:"registers",dotpos:"e,874.42,536.62 645.71,383.47 713.81,429.07 796.79,484.64 866.04,531.01",points:[[646,383],[714,429],[797,485],[866,531]],labelBBox:{x:776,y:448,width:58,height:18},parent:"otc-edp-per-tenant",relations:["g9oj4f"],color:"gray",line:"dashed",head:"normal"},{id:"8msu1q",source:"otc-edp-per-tenant.cce.edp.forgejo",target:"otc-edp-per-tenant.cloudServices.postgres",label:null,dotpos:"e,408.47,886.62 836.84,684.1 743.28,717.71 626.38,763.79 527,815.4 490.05,834.59 451.75,858.08 416.81,881.1",points:[[837,684],[743,718],[626,764],[527,815],[490,835],[452,858],[417,881]],labelBBox:null,parent:"otc-edp-per-tenant",relations:["hks76r"],color:"gray",line:"dashed",head:"normal"},{id:"120qe5o",source:"otc-edp-per-tenant.cce.edp.forgejo",target:"otc-edp-per-tenant.cloudServices.redis",label:null,dotpos:"e,832,886.69 947.09,716.17 913.73,765.59 872.15,827.21 837.87,877.99",points:[[947,716],[914,766],[872,827],[838,878]],labelBBox:null,parent:"otc-edp-per-tenant",relations:["1w18ve8"],color:"gray",line:"dashed",head:"normal"},{id:"ealiax",source:"otc-edp-per-tenant.cce.edp.forgejo",target:"otc-edp-per-tenant.cloudServices.objectstorage",label:null,dotpos:"e,1182,886.69 1066.9,716.17 1100.3,765.59 1141.9,827.21 1176.1,877.99",points:[[1067,716],[1100,766],[1142,827],[1176,878]],labelBBox:null,parent:"otc-edp-per-tenant",relations:["15njmlz"],color:"gray",line:"dashed",head:"normal"},{id:"1trj5u6",source:"otc-edp-per-tenant.cce.edp.forgejo",target:"otc-edp-per-tenant.cloudServices.elasticsearch",label:null,dotpos:"e,1604.5,886.79 1103.6,716.4 1143.6,747.92 1192.2,780.08 1242,798.4 1336.1,833 1371.9,783.6 1467,815.4 1512.1,830.47 1557.1,855.46 1596.3,881.27",points:[[1104,716],[1144,748],[1192,780],[1242,798],[1336,833],[1372,784],[1467,815],[1512,830],[1557,855],[1596,881]],labelBBox:null,parent:"otc-edp-per-tenant",relations:["1fzhjm9"],color:"gray",line:"dashed",head:"normal"}]},"edp-foundry-central-service":{_type:"deployment",tags:null,links:null,_stage:"layouted",sourcePath:"views/deployment/otc/foundry.c4",description:null,title:"EDP Foundry Central Service",id:"edp-foundry-central-service",autoLayout:{direction:"TB"},hash:"8f8eb235b0e8ff555a22ed61d124ba68e67e5ee2",bounds:{x:0,y:0,width:3894,height:1218},nodes:[{id:"otc-edpFoundry",parent:null,level:0,children:["otc-edpFoundry.cce","otc-edpFoundry.forgejoRunnerInfrastructure","otc-edpFoundry.workflowSetupEDPInfrastructure","otc-edpFoundry.workflowSetupArgoCDInfrastructure"],inEdges:[],outEdges:[],deploymentRef:"otc-edpFoundry",title:"OTC EDP Foundry Central Service clusters",kind:"cloud",technology:"OTC",color:"slate",shape:"rectangle",description:{txt:`OTC environments for the central EDP Foundry services. This is kubernetes clusters and other infrastructure like nodes and vms, and optionally platform servi
A tenant is a folder in Foundry-Config-Forgejo. On merge triggers reconciliation to EDP.
Optionally we will have a WebUI/API/CLI`},tags:[],style:{opacity:15,size:"md"},depth:3,x:8,y:8,width:3878,height:1202,labelBBox:{x:6,y:0,width:280,height:15}},{id:"otc-edpFoundry.cce",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.cce.internalServices","otc-edpFoundry.cce.centralObservability"],inEdges:["628xl1"],outEdges:["84397w","1oz2va9"],deploymentRef:"otc-edpFoundry.cce",title:"OTC CCE",kind:"kubernetes",technology:"Kubernetes",color:"red",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"OTC Container Cluster Engine"},tags:[],style:{opacity:15,size:"md"},depth:2,x:58,y:79,width:2360,height:755,labelBBox:{x:6,y:0,width:54,height:15}},{id:"otc-edpFoundry.cce.internalServices",parent:"otc-edpFoundry.cce",level:2,children:["otc-edpFoundry.cce.internalServices.externalSecrets","otc-edpFoundry.cce.internalServices.ingressNginx","otc-edpFoundry.cce.internalServices.argoCD","otc-edpFoundry.cce.internalServices.forgejo","otc-edpFoundry.cce.internalServices.openbao"],inEdges:["628xl1"],outEdges:["84397w","1oz2va9"],deploymentRef:"otc-edpFoundry.cce.internalServices",title:"EDP Foundry Internal Services",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:1028,y:150,width:1340,height:634,labelBBox:{x:6,y:0,width:201,height:15}},{id:"otc-edpFoundry.cce.internalServices.externalSecrets",parent:"otc-edpFoundry.cce.internalServices",level:3,children:[],inEdges:[],outEdges:[],kind:"instance",title:"external-secrets",description:{txt:"Provider to access externally stored Kubernetes secrets"},tags:["internal"],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.externalSecrets",modelRef:"edp.externalSecrets",navigateTo:"externalSecrets",x:1308,y:222,width:320,height:180,labelBBox:{x:39,y:54,width:242,height:65}},{id:"otc-edpFoundry.cce.centralObservability",parent:"otc-edpFoundry.cce",level:2,children:["otc-edpFoundry.cce.centralObservability.grafana","otc-edpFoundry.cce.centralObservability.prometheus","otc-edpFoundry.cce.centralObservability.loki"],inEdges:[],outEdges:[],deploymentRef:"otc-edpFoundry.cce.centralObservability",title:"EDP Foundry Central Observability",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:108,y:150,width:870,height:634,labelBBox:{x:6,y:0,width:232,height:15}},{id:"otc-edpFoundry.forgejoRunnerInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner"],inEdges:[],outEdges:["628xl1"],deploymentRef:"otc-edpFoundry.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"green",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},depth:1,x:2468,y:168,width:384,height:266,labelBBox:{x:6,y:0,width:235,height:15}},{id:"otc-edpFoundry.cce.centralObservability.grafana",parent:"otc-edpFoundry.cce.centralObservability",level:3,children:[],inEdges:[],outEdges:["qykxlm","yv49z5"],kind:"instance",title:"Grafana",description:{txt:"Data visualization and monitoring"},tags:[],icon:"tech:grafana",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.centralObservability.grafana",modelRef:"edp.grafana",x:289,y:222,width:345,height:180,labelBBox:{x:47,y:63,width:283,height:47}},{id:"otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner",parent:"otc-edpFoundry.forgejoRunnerInfrastructure",level:2,children:[],inEdges:[],outEdges:["628xl1"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:2500,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edpFoundry.cce.cent
offering capabilities like
code version controling
collaboration and ticketing
and security scanning`},technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.forgejo",modelRef:"edp.forgejo",navigateTo:"forgejo",x:1978,y:554,width:340,height:180,labelBBox:{x:46,y:18,width:278,height:139}},{id:"otc-edpFoundry.cce.internalServices.openbao",parent:"otc-edpFoundry.cce.internalServices",level:3,children:[],inEdges:["u5oqat"],outEdges:[],kind:"instance",title:"OpenBao",description:{txt:"Secure secret storage"},tags:[],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.openbao",modelRef:"edp.openbao",x:1528,y:554,width:320,height:180,labelBBox:{x:85,y:63,width:151,height:48}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner","otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker","otc-edpFoundry.workflowSetupEDPInfrastructure.edpworkflow"],inEdges:["84397w"],outEdges:[],deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure",title:"EDP infrastructure Workflow",kind:"computeressource",color:"amber",shape:"rectangle",description:{txt:"EDP infrastructure Workflow"},tags:[],style:{opacity:15,size:"md"},depth:1,x:2902,y:150,width:442,height:1010,labelBBox:{x:6,y:0,width:201,height:15}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner","otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunnerWorker","otc-edpFoundry.workflowSetupArgoCDInfrastructure.edpworkflow"],inEdges:["1oz2va9"],outEdges:[],deploymentRef:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",title:"EDP ArgoCD Workflow",kind:"computeressource",color:"amber",shape:"rectangle",description:{txt:"EDP Setup ArgoCD Workflow"},tags:[],style:{opacity:15,size:"md"},depth:1,x:3394,y:150,width:442,height:1010,labelBBox:{x:6,y:0,width:149,height:15}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",level:2,children:[],inEdges:["84397w"],outEdges:["1hnil62"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:2961,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner",parent:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",level:2,children:[],inEdges:["1oz2va9"],outEdges:["1gtxobu"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:3466,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",level:2,children:[],inEdges:["1hnil62"],outEdges:["ekzztw"],kind:"instance",title:"Forgejo Runner Worker",description:{txt:"A worker is a service that runs a job invoked by a runner. A worker typically is a container."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",modelRef:"forgejoRunnerWorker",x:2954,y:554,width:333,height:180,labelBBox:{x:18,y:45,width:297,height:84}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunnerWorker",parent:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",level:2,children:[],inEdges:["1gtxobu"]
A tenant is a folder in Foundry-Config-Forgejo. On merge triggers reconciliation to EDP.
Optionally we will have a WebUI/API/CLI`},tags:[],style:{opacity:15,size:"md"},depth:3,x:2052,y:8,width:3408,height:1609,labelBBox:{x:6,y:0,width:280,height:15}},{id:"otc-edpFoundry.cce",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.cce.internalServices","otc-edpFoundry.cce.centralObservability"],inEdges:["628xl1"],outEdges:["84397w","1oz2va9"],deploymentRef:"otc-edpFoundry.cce",title:"OTC CCE",kind:"kubernetes",technology:"Kubernetes",color:"red",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"OTC Container Cluster Engine"},tags:[],style:{opacity:15,size:"md"},depth:2,x:2594,y:79,width:1890,height:1488,labelBBox:{x:6,y:0,width:54,height:15}},{id:"otc-edpFoundry.cce.internalServices",parent:"otc-edpFoundry.cce",level:2,children:["otc-edpFoundry.cce.internalServices.externalSecrets","otc-edpFoundry.cce.internalServices.ingressNginx","otc-edpFoundry.cce.internalServices.argoCD","otc-edpFoundry.cce.internalServices.forgejo","otc-edpFoundry.cce.internalServices.openbao"],inEdges:["628xl1"],outEdges:["84397w","1oz2va9"],deploymentRef:"otc-edpFoundry.cce.internalServices",title:"EDP Foundry Internal Services",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:2644,y:883,width:1790,height:634,labelBBox:{x:6,y:0,width:201,height:15}},{id:"otc-edpFoundry.cce.internalServices.externalSecrets",parent:"otc-edpFoundry.cce.internalServices",level:3,children:[],inEdges:[],outEdges:[],kind:"instance",title:"external-secrets",description:{txt:"Provider to access externally stored Kubernetes secrets"},tags:["internal"],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.externalSecrets",modelRef:"edp.externalSecrets",navigateTo:"externalSecrets",x:2694,y:1287,width:320,height:180,labelBBox:{x:39,y:54,width:242,height:66}},{id:"otc-edpFoundry.cce.centralObservability",parent:"otc-edpFoundry.cce",level:2,children:["otc-edpFoundry.cce.centralObservability.grafana","otc-edpFoundry.cce.centralObservability.prometheus","otc-edpFoundry.cce.centralObservability.loki"],inEdges:[],outEdges:[],deploymentRef:"otc-edpFoundry.cce.centralObservability",title:"EDP Foundry Central Observability",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:3349,y:150,width:870,height:634,labelBBox:{x:6,y:0,width:232,height:15}},{id:"otc-edpFoundry.forgejoRunnerInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner"],inEdges:[],outEdges:["628xl1"],deploymentRef:"otc-edpFoundry.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"green",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},depth:1,x:5026,y:168,width:384,height:266,labelBBox:{x:6,y:0,width:235,height:15}},{id:"otc-edp-per-tenant",parent:null,level:0,children:["otc-edp-per-tenant.forgejoRunnerInfrastructure","otc-edp-per-tenant.cce","otc-edp-per-tenant.cloudServices"],inEdges:["1asm38z","1or831y","ejqwjt"],outEdges:[],deploymentRef:"otc-edp-per-tenant",title:"OTC EDP per tenant cluster",kind:"cloud",technology:"OTC",color:"slate",shape:"rectangle",description:{txt:`OTC environment for EDP. EDP is the environment a customer gets from us.
This is kubernetes clusters and other infrastructure like nodes and vms, and platform services. All is set up by IaC-pipelines in the Foundry.`},tags:[],style:{opacity:15,size:"md"},depth:3,x:8,y:97,width:1994,height:1889,labelBBox:{x:6,y:0,width:181,height:15}},{id:"otc-edp-per-tenant.forgejoRunnerInfrastructure",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner"],inEdges:[],outEdges:["1dcszi5"],deploymentRef:"otc-edp-per-tenant.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"primary",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},depth:1,x:608,y:168,width:384,height:266,labelBBox:{x:6,y:0,width:235,height:15}},{id:"otc-edpFoundry.cce.centralObservability.grafana",parent:"otc-edpFoundry.cce.centralObservability",level:3,children:[],inEdges:[],outEdges:["qykxlm","yv49z5"],kind:"instance",title:"Grafana",description:{txt:"Data visualization and monitoring"},tags:[],icon:"tech:grafana",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.centralObservability.grafana",modelRef:"edp.grafana",x:3530,y:222,width:345,height:180,labelBBox:{x:47,y:63,width:283,height:47}},{id:"otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner",parent:"otc-edpFoundry.forgejoRunnerInfrastructure",level:2,children:[],inEdges:[],outEdges:["628xl1"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:5058,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edp-per-tenant.cce",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.cce.edp"],inEdges:["1or831y","ejqwjt","1dcszi5"],outEdges:["8msu1q","120qe5o","ealiax","1trj5u6"],deploymentRef:"otc-edp-per-tenant.cce",title:"OTC CCE",kind:"kubernetes",technology:"Kubernetes",color:"red",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"OTC Container Cluster Engine"},tags:[],style:{opacity:15,size:"md"},depth:2,x:548,y:830,width:1404,height:719,labelBBox:{x:6,y:0,width:54,height:15}},{id:"otc-edp-per-tenant.cce.edp",parent:"otc-edp-per-tenant.cce",level:2,children:["otc-edp-per-tenant.cce.edp.externalSecrets","otc-edp-per-tenant.cce.edp.ingressNginx","otc-edp-per-tenant.cce.edp.argoCD","otc-edp-per-tenant.cce.edp.forgejo"],inEdges:["1or831y","ejqwjt","1dcszi5"],outEdges:["8msu1q","120qe5o","ealiax","1trj5u6"],deploymentRef:"otc-edp-per-tenant.cce.edp",title:"EDP",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:580,y:883,width:1340,height:634,labelBBox:{x:6,y:0,width:27,height:15}},{id:"otc-edp-per-tenant.cce.edp.externalSecrets",parent:"otc-edp-per-tenant.cce.edp",level:3,children:[],inEdges:[],outEdges:[],kind:"instance",title:"external-secrets",description:{txt:"Provider to access externally stored Kubernetes secrets"},tags:["internal"],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.externalSecrets",modelRef:"edp.externalSecrets",navigateTo:"externalSecrets",x:1550,y:1287,width:320,height:180,labelBBox:{x:39,y:54,width:242,height:66}},{id:"otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner",parent:"otc-edp-per-tenant.forgejoRunnerInfrastructure",level:2,children:[],inEdges:[],outEdges:["1dcszi5"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner",modelRef:"forgejoRunn
offering capabilities like
code version controling
collaboration and ticketing
and security scanning`},technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.forgejo",modelRef:"edp.forgejo",navigateTo:"forgejo",x:4044,y:1287,width:340,height:180,labelBBox:{x:46,y:18,width:278,height:139}},{id:"otc-edpFoundry.cce.internalServices.openbao",parent:"otc-edpFoundry.cce.internalServices",level:3,children:[],inEdges:["u5oqat"],outEdges:[],kind:"instance",title:"OpenBao",description:{txt:"Secure secret storage"},tags:[],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.openbao",modelRef:"edp.openbao",x:3594,y:1287,width:320,height:180,labelBBox:{x:85,y:63,width:151,height:48}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner","otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker","otc-edpFoundry.workflowSetupEDPInfrastructure.edpworkflow"],inEdges:["84397w"],outEdges:["1asm38z","1or831y"],deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure",title:"EDP infrastructure Workflow",kind:"computeressource",color:"amber",shape:"rectangle",description:{txt:"EDP infrastructure Workflow"},tags:[],style:{opacity:15,size:"md"},depth:1,x:4534,y:150,width:442,height:1035,labelBBox:{x:6,y:0,width:201,height:15}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner","otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunnerWorker","otc-edpFoundry.workflowSetupArgoCDInfrastructure.edpworkflow"],inEdges:["1oz2va9"],outEdges:["ejqwjt"],deploymentRef:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",title:"EDP ArgoCD Workflow",kind:"computeressource",color:"amber",shape:"rectangle",description:{txt:"EDP Setup ArgoCD Workflow"},tags:[],style:{opacity:15,size:"md"},depth:1,x:2102,y:150,width:442,height:1035,labelBBox:{x:6,y:0,width:149,height:15}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",level:2,children:[],inEdges:["84397w"],outEdges:["1hnil62"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:4595,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner",parent:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",level:2,children:[],inEdges:["1oz2va9"],outEdges:["1gtxobu"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:2163,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",level:2,children:[],inEdges:["1hnil62"],outEdges:["ekzztw"],kind:"instance",title:"Forgejo Runner Worker",description:{txt:"A worker is a service that runs a job invoked by a runner. A worker typically is a container."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",modelRef:"forgejoRunnerWorker",x:4588,y:554,width:333,height:180,labelBBox:{x:18,y:45,width:297,height:84}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunnerWorker",parent:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",level:2,ch
offering capabilities like
code version controling
collaboration and ticketing
and security scanning`},technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.forgejo",modelRef:"edp.forgejo",navigateTo:"forgejo",x:630,y:1287,width:340,height:180,labelBBox:{x:46,y:18,width:278,height:139}},{id:"otc-edp-per-tenant.cloudServices",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.cloudServices.postgres","otc-edp-per-tenant.cloudServices.redis","otc-edp-per-tenant.cloudServices.objectstorage","otc-edp-per-tenant.cloudServices.elasticsearch"],inEdges:["1asm38z","8msu1q","120qe5o","ealiax","1trj5u6"],outEdges:[],deploymentRef:"otc-edp-per-tenant.cloudServices",title:"EDP Cloud Services",kind:"paas",technology:"Cloud Services",color:"primary",shape:"rectangle",description:{txt:"EDP Cloud Services"},tags:[],style:{opacity:15,size:"md"},depth:1,x:58,y:1634,width:1894,height:302,labelBBox:{x:6,y:0,width:127,height:15}},{id:"otc-edp-per-tenant.cloudServices.postgres",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["8msu1q"],outEdges:[],kind:"instance",title:"PostgreSQL",description:{txt:`PostgreSQL is a powerful, open source object-relational database system.
It has more than 15 years of active development and a proven architecture
that has earned it a strong reputation for reliability, data integrity,
and correctness.`},technology:"PostgreSQL",tags:[],icon:"tech:postgresql",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.postgres",modelRef:"postgres",x:1548,y:1706,width:354,height:180,labelBBox:{x:46,y:17,width:292,height:139}},{id:"otc-edp-per-tenant.cloudServices.redis",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["120qe5o"],outEdges:[],kind:"instance",title:"Redis",description:{txt:"Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker."},technology:"Redis",tags:[],icon:"tech:redis",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.redis",modelRef:"redis",x:608,y:1706,width:359,height:180,labelBBox:{x:47,y:26,width:297,height:121}},{id:"otc-edp-per-tenant.cloudServices.objectstorage",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["ealiax"],outEdges:[],kind:"instance",title:"s3 Object Storage",description:{txt:"s3 Object Storage"},technology:"S3 Object Storage",tags:[],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.objectstorage",modelRef:"objectstorage",x:1098,y:1706,width:320,height:180,labelBBox:{x:78,y:53,width:164,height:67}},{id:"otc-edp-per-tenant.cloudServices.elasticsearch",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["1trj5u6"],outEdges:[],kind:"instance",title:"Elasticsearch",description:{txt:`Elasticsearch is a distributed, RESTful search and analytics engine capable of
addressing a growing number of use cases. It centrally stores your data so you can
discover the expected and uncover the unexpected.`},technology:"Elasticsearch",tags:[],icon:"tech:elasticsearch",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.elasticsearch",modelRef:"elasticsearch",x:108,y:1706,width:370,height:180,labelBBox:{x:46,y:17,width:308,height:139}}],edges:[{id:"17kru01",source:"otc-edpFoundry.cce.internalServices.ingressNginx",target:"otc-edpFoundry.cce.internalServices.argoCD",label:"https",dotpos:"e,3463.8,1312.3 4054.2,1100.1 3915,1148.1 3708,1220.4 3529,1287.4 3511,1294.1 3492.2,1301.3 3473.6,1308.5",points:[[4054,1100],[3915,1148],[3708,1220],[3529,1287],[3511,1294],[3492,1301],[3474,1309]],labelBBox:{x:3755,y:1199,width:34,height:18},parent:"otc-edpFoundry.cce.internalServices",relations:["1yssos5"],color:"gray",line:"dashed",head:"normal"},{id:"170pc3l",source:"otc-edpFoundry.cce.internalServices.ingressNginx",target:"otc-edpFoundry.cce.internalServices.forgejo",label:"https",dotpos:"e,4214,1287.5 4214,1134.2 4214,1178.3 4214,1231.6 4214,1277",points:[[4214,1134],[4214,1178],[4214,1232],[4214,1277]],labelBBox:{x:4215,y:1199,width:34,height:18},parent:"otc-edpFoundry.cce.internalServices",relations:["123efwn"],color:"gray",line:"dashed",head:"normal"},{id:"u5oqat",source:"otc-edpFoundry.cce.internalServices.ingressNginx",target:"otc-edpFoundry.cce.internalServices.openbao",label:"https",dotpos:"e,3877.5,1287.6 4090.4,1134.5 4027.1,1180 3950.1,1235.4 3885.6,1281.7",points:[[4090,1134],[4027,1180],[3950,1235],[3886,1282]],labelBBox:{x:3999,y:1199,width:34,height:18},parent:"otc-edpFoundry.cce.internalServices",relations:["1p30hav"],color:"gray",line:"dashed",head:"normal"},{id:"qykxlm",source:"otc-edpFoundry.cce.centralObservability.grafana",target:"otc-edpFoundry.cce.centralObservability.prometheus",label:"get metrics and alerts",dotpos:"e,3597.7,554.51 3664.4,401.25 3645.1,445.56 3621.7,499.31 3601.9,544.91",points:[[3664,401],[3645,446],[3622,499],[3602,545]],labelBBox:{x:3636,y:466,width:138,height:18},parent:"otc-edpFoundry.cce.centralObservability",relations:["13uvtiq"],color:"gray",line:"dashed",head:"normal"},{id:"yv49z5",source:"otc-edpFoundry.cce.centralObservability.grafana",target:"otc-edpFoundry.cce.centralObservability.loki",label:"get logs",dotpos:"e,3926.8,554.51 3785,401.25 3826.6,446.21 3877.2,500.89 3919.7,546.91",points:[[3785,401],[3827,446],[3877,501],[3920,547]],labelBBox:{x:3866,y:466,width:53,height:18},parent:"otc-edpFoundry.cce.centralObservability",relations:["1n1utzc"],color:"gray",line:"dashed",head:"normal"},{id:"84397w",source:"otc-edpFoundry.cce.internalServices.forgejo",target:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",label:"invokes",dotpos:"e,4871.9,401.35 4384,1358.7 4589.5,1333.3 4917.1,1279 4991,1184.6 5006.1,1165.4 5006.3,601.48 4987,554.4 4964.1,498.68 4921.8,448.48 4879.5,408.45",points:[[4384,1359],[4590,1333],[4917,1279],[4991,1185],[5006,1165],[5006,601],[4987,554],[4964,499],[4922,448],[4880,408]],labelBBox:{x:5002,y:799,width:51,height:18},parent:"otc-edpFoundry",relations:["dola40"],color:"gray",line:"dashed",head:"normal"},{id:"1hnil62",source:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",target:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",label:"runs",dotpos:"e,4755,554.51 4755,401.25 4755,445.28 4755,498.64 4755,544.05",points:[[4755,401],[4755,445],[4755,499],[4755,544]],labelBBox:{x:4756,y:466,width:31,height:18},parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",relations:["7kqly3"],color:"gray",line:"dashed",head:"normal"},{id:"ekzztw",source:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",target:"otc-edpFoundry.workflowSetupEDPInfrastructure.edpworkflow",label:"executes",dotpos:"e,4755,954.66 4755,734.27 4755,796.6 4755,879.99 4755,944.48",points:[[4755,734],[4755,797],[4755,880],[4755,944]],labelBBox:{x:4756,y:799,width:60,height:18},parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",relations:["12hf1w4"],color:"gray",line:"dashed",head:"normal"},{id:"1oz2va9",source:"otc-edpFoundry.c
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the 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
refactor(architecture): reorganize LikeC4 projects and consolidate webcomponents Renamed resources/likec4 to resources/edp-likec4 to better reflect that this directory contains the Enterprise Developer Platform architecture models, not documentation platform architecture. Extended element kinds in edp-likec4/models/spec.c4 to support documentation platform modeling: - Added person, tool, process, repository element kinds - These allow modeling of documentation workflows and processes Consolidated webcomponent generation: - Combined both architecture projects (edp-likec4 and doc-likec4) into a single webcomponent output at static/js/likec4-webcomponent.js - Updated Taskfile.yml to generate from edp-likec4 directory - Removed duplicate webcomponent script loading in head-end.html - Fixed CustomElementRegistry duplicate registration issue Embedded TeleNeoOffice corporate fonts: - Added font files to static/fonts/ and static/ root - Required for correct rendering of diagrams in webcomponent - Fonts are embedded in webcomponent but also served from Hugo static paths - Fixed 404 errors for font loading Updated architecture documentation: - Fixed markdown linting issues (trailing spaces, fence spacing) - Updated all references from resources/likec4 to resources/edp-likec4 - Enhanced setup.md with correct directory structure This refactoring enables: 1. Clear separation between EDP architecture and documentation platform models 2. Single consolidated webcomponent containing all architecture views 3. Proper font loading for corporate branding in diagrams 4. Foundation for future architecture documentation expansion Breaking changes: None (paths updated in documentation)
2025-11-07 11:50:17 +01:00
This is kubernetes clusters and other infrastructure like nodes and vms, and platform services. All is set up by IaC-pipelines in the Foundry.`},technology:"OTC",title:"OTC EDP per tenant cluster",id:"otc-edp-per-tenant"},"otc-faas":{style:{},kind:"cloud",description:{txt:"OTC environments for Prototype faaS."},technology:"OTC",title:"OTC prototype FaaS",id:"otc-faas"},edge:{style:{},kind:"cloud",description:{txt:"Edge environments for distributed workloads."},technology:"Edge",title:"Edge Cloud",id:"edge"},"otc-edpFoundry":{style:{},kind:"cloud",description:{txt:`OTC environments for the central EDP Foundry services. This is kubernetes clusters and other infrastructure like nodes and vms, and optionally platform services. All is set up by IaC terraform and edpbuilder.
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
A tenant is a folder in Foundry-Config-Forgejo. On merge triggers reconciliation to EDP.
Optionally we will have a WebUI/API/CLI`},technology:"OTC",title:"OTC EDP Foundry Central Service clusters",id:"otc-edpFoundry"},"local.backstage":{style:{},kind:"namespace",title:"backstage",id:"local.backstage"},"local.argocd":{style:{},kind:"namespace",title:"argocd",id:"local.argocd"},"local.gitea":{style:{},kind:"namespace",title:"gitea",id:"local.gitea"},"local.keycloak":{style:{},kind:"namespace",title:"keycloak",id:"local.keycloak"},"local.crossplane":{style:{},kind:"namespace",title:"crossplane-system",id:"local.crossplane"},"local.externalSecrets":{style:{},kind:"namespace",title:"external-secrets",id:"local.externalSecrets"},"local.velero":{style:{},kind:"namespace",title:"velero",id:"local.velero"},"local.minio":{style:{},kind:"namespace",title:"minio-backup",id:"local.minio"},"local.monitoring":{style:{},kind:"namespace",title:"monitoring",id:"local.monitoring"},"local.ingressNginx":{style:{},kind:"namespace",title:"ingress-nginx",id:"local.ingressNginx"},"local.openbao":{style:{},kind:"namespace",title:"openbao",id:"local.openbao"},"local.fibonacci":{style:{},kind:"namespace",title:"fibonacci-app",id:"local.fibonacci"},"local.mailhog":{style:{},kind:"namespace",title:"mailhog",id:"local.mailhog"},"local.spark":{style:{},kind:"namespace",title:"spark",id:"local.spark"},"otc-edp-per-tenant.cce":{style:{icon:"tech:kubernetes"},kind:"kubernetes",description:{txt:"OTC Container Cluster Engine"},technology:"Kubernetes",title:"OTC CCE",id:"otc-edp-per-tenant.cce"},"otc-edp-per-tenant.cloudServices":{style:{},kind:"paas",description:{txt:"EDP Cloud Services"},technology:"Cloud Services",title:"EDP Cloud Services",id:"otc-edp-per-tenant.cloudServices"},"otc-edp-per-tenant.forgejoRunnerInfrastructure":{style:{},kind:"computeressource",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},title:"EDP ForgejoRunner infrastructure",id:"otc-edp-per-tenant.forgejoRunnerInfrastructure"},"otc-faas.dev":{style:{},kind:"environment",description:{txt:"*.t09.de"},technology:"OTC",title:"tenant Dev",id:"otc-faas.dev"},"otc-faas.prod":{style:{},kind:"environment",description:{txt:"*.buildth.ing"},technology:"OTC",title:"Tenant Prod",id:"otc-faas.prod"},"edge.edge-dev":{style:{},kind:"environment",description:{txt:"Edge development environment"},technology:"Edge",title:"Edge Dev",id:"edge.edge-dev"},"edge.edge-prod":{style:{},kind:"environment",description:{txt:"Edge production environment"},technology:"Edge",title:"Edge Prod",id:"edge.edge-prod"},"otc-edpFoundry.cce":{style:{icon:"tech:kubernetes"},kind:"kubernetes",description:{txt:"OTC Container Cluster Engine"},technology:"Kubernetes",title:"OTC CCE",id:"otc-edpFoundry.cce"},"otc-edpFoundry.workflowSetupEDPInfrastructure":{style:{},kind:"computeressource",description:{txt:"EDP infrastructure Workflow"},title:"EDP infrastructure Workflow",id:"otc-edpFoundry.workflowSetupEDPInfrastructure"},"otc-edpFoundry.workflowSetupArgoCDInfrastructure":{style:{},kind:"computeressource",description:{txt:"EDP Setup ArgoCD Workflow"},title:"EDP ArgoCD Workflow",id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure"},"otc-edpFoundry.forgejoRunnerInfrastructure":{style:{},kind:"computeressource",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},title:"EDP ForgejoRunner infrastructure",id:"otc-edpFoundry.forgejoRunnerInfrastructure"},"local.backstage.backstage":{id:"local.backstage.backstage",element:"edp.ui.backstage",style:{}},"local.backstage.database":{id:"local.backstage.database",element:"edp.ui.database",style:{}},"local.argocd.argocdAppController":{id:"local.argocd.argocdAppController",element:"edp.argoCD.argocdAppController",style:{}},"local.argocd.argocdAppSetController":{id:"local.argocd.argocdAppSetController",element:"edp.argoCD.argocdAppSetController",style:{}},"local.argocd.argocdRedis":{id:"local.argocd.argocdRedis",element:"edp.argoCD.argocdRedis",style:{}},"local.argocd.argocdRepoServer":{id:"local.argocd.argocdRepoServer",element:"edp.argoCD.argocdRepoServer",style:{}},"local.argocd.argocdServer":{id:"local.argocd.argocdS
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
at`)?" (<anonymous>)":-1<v.stack.indexOf("@")?"@unknown:0:0":""}return`
`+he+p+me}var Ie=!1;function Ze(p,m){if(!p||Ie)return"";Ie=!0;var v=Error.prepareStackTrace;Error.prepareStackTrace=void 0;try{var S={DetermineComponentFrameRoot:function(){try{if(m){var Pe=function(){throw Error()};if(Object.defineProperty(Pe.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(Pe,[])}catch(Ce){var ke=Ce}Reflect.construct(p,[],Pe)}else{try{Pe.call()}catch(Ce){ke=Ce}p.call(Pe.prototype)}}else{try{throw Error()}catch(Ce){ke=Ce}(Pe=p())&&typeof Pe.catch=="function"&&Pe.catch(function(){})}}catch(Ce){if(Ce&&ke&&typeof Ce.stack=="string")return[Ce.stack,ke.stack]}return[null,null]}};S.DetermineComponentFrameRoot.displayName="DetermineComponentFrameRoot";var $=Object.getOwnPropertyDescriptor(S.DetermineComponentFrameRoot,"name");$&&$.configurable&&Object.defineProperty(S.DetermineComponentFrameRoot,"name",{value:"DetermineComponentFrameRoot"});var z=S.DetermineComponentFrameRoot(),X=z[0],oe=z[1];if(X&&oe){var pe=X.split(`
`),we=oe.split(`
`);for($=S=0;S<pe.length&&!pe[S].includes("DetermineComponentFrameRoot");)S++;for(;$<we.length&&!we[$].includes("DetermineComponentFrameRoot");)$++;if(S===pe.length||$===we.length)for(S=pe.length-1,$=we.length-1;1<=S&&0<=$&&pe[S]!==we[$];)$--;for(;1<=S&&0<=$;S--,$--)if(pe[S]!==we[$]){if(S!==1||$!==1)do if(S--,$--,0>$||pe[S]!==we[$]){var Ne=`
`+pe[S].replace(" at new "," at ");return p.displayName&&Ne.includes("<anonymous>")&&(Ne=Ne.replace("<anonymous>",p.displayName)),Ne}while(1<=S&&0<=$);break}}}finally{Ie=!1,Error.prepareStackTrace=v}return(v=p?p.displayName||p.name:"")?Te(v):""}function rt(p,m){switch(p.tag){case 26:case 27:case 5:return Te(p.type);case 16:return Te("Lazy");case 13:return p.child!==m&&m!==null?Te("Suspense Fallback"):Te("Suspense");case 19:return Te("SuspenseList");case 0:case 15:return Ze(p.type,!1);case 11:return Ze(p.type.render,!1);case 1:return Ze(p.type,!0);case 31:return Te("Activity");default:return""}}function Rt(p){try{var m="",v=null;do m+=rt(p,v),v=p,p=p.return;while(p);return m}catch(S){return`
Error generating stack: `+S.message+`
`+S.stack}}var Qe=Object.prototype.hasOwnProperty,Pt=e.unstable_scheduleCallback,Ke=e.unstable_cancelCallback,Ge=e.unstable_shouldYield,ct=e.unstable_requestPaint,ut=e.unstable_now,Ir=e.unstable_getCurrentPriorityLevel,Ee=e.unstable_ImmediatePriority,Se=e.unstable_UserBlockingPriority,it=e.unstable_NormalPriority,xt=e.unstable_LowPriority,zt=e.unstable_IdlePriority,Fr=e.log,It=e.unstable_setDisableYieldValue,vr=null,fr=null;function un(p){if(typeof Fr=="function"&&It(p),fr&&typeof fr.setStrictMode=="function")try{fr.setStrictMode(vr,p)}catch{}}var ir=Math.clz32?Math.clz32:ea,vn=Math.log,xr=Math.LN2;function ea(p){return p>>>=0,p===0?32:31-(vn(p)/xr|0)|0}var xa=256,Gs=262144,Vo=4194304;function wa(p){var m=p&42;if(m!==0)return m;switch(p&-p){case 1:return 1;case 2:return 2;case 4:return 4;case 8:return 8;case 16:return 16;case 32:return 32;case 64:return 64;case 128:return 128;case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:return p&261888;case 262144:case 524288:case 1048576:case 2097152:return p&3932160;case 4194304:case 8388608:case 16777216:case 33554432:return p&62914560;case 67108864:return 67108864;case 134217728:return 134217728;case 268435456:return 268435456;case 536870912:return 536870912;case 1073741824:return 0;default:return p}}function Xs(p,m,v){var S=p.pendingLanes;if(S===0)return 0;var $=0,z=p.suspendedLanes,X=p.pingedLanes;p=p.warmLanes;var oe=S&134217727;return oe!==0?(S=oe&~z,S!==0?$=wa(S):(X&=oe,X!==0?$=wa(X):v||(v=oe&~p,v!==0&&($=wa(v))))):(oe=S&~z,oe!==0?$=wa(oe):X!==0?$=wa(X):v||(v=S&~p,v!==0&&($=wa(v)))),$===0?0:m!==0&&m!==$&&(m&z)===0&&(z=$&-$,v=m&-m,z>=v||z===32&&(v&4194048)!==0)?m:$}function fo(p,m){return(p.pendingLanes&~(p.suspendedLanes&~p.pingedLanes)&m)===0}function Ol(p,m){switch(p){case 1:case 2:case 4:case 8:case 64:return m+250;case 16:case 32:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:return m+5e3;case 4194304:case 8388608:case 16777216:case 33554432:return-1;case 67108864:case 134217728:case 268435456:case 536870912:case 1073741824:return-1;default:return-1}}function jl(){var p=Vo;return Vo<<=1,(Vo&62914560)===0&&(Vo=4194304),p}function Bc(p){for(var m=[],v=0;31>v;v++)m.push(p);return m}function Ks(p,m){p.pendingLanes|=m,m!==268435456&&(p.suspendedLanes=0,p.pingedLanes=0,p.warmLanes=0)}function Rh(p,m,v,S,$,z){var X=p.pendingLanes;p.pendingLanes=v,p.suspendedLanes=0,p.pingedLanes=0,p.warmLanes=0,p.expiredLanes&=v,p.entangledLanes&=v,p.errorRecoveryDisabledLanes&=v,p.shellSuspendCounter=0;var oe=p.entanglements,pe=p.expirationTimes,we=p.hiddenUpdates;for(v=X&~v;0<v;){var Ne=31-ir(v),Pe=1<<Ne;oe[Ne]=0,pe[Ne]=-1;var ke=we[Ne];if(ke!==null)for(we[Ne]=null,Ne=0;Ne<ke.length;Ne++){var Ce=ke[Ne];Ce!==null&&(Ce.lane&=-536870913)}v&=~Pe}S!==0&&Ll(p,S,0),z!==0&&$===0&&p.tag!==0&&(p.suspendedLanes|=z&~(X&~m))}function Ll(p,m,v){p.pendingLanes|=m,p.suspendedLanes&=~m;var S=31-ir(m);p.entangledLanes|=m,p.entanglements[S]=p.entanglements[S]|1073741824|v&261930}function id(p,m){var v=p.entangledLanes|=m;for(p=p.entanglements;v;){var S=31-ir(v),$=1<<S;$&m|p[S]&m&&(p[S]|=m),v&=~$}}function ta(p,m){var v=m&-m;return v=(v&42)!==0?1:Fc(v),(v&(p.suspendedLanes|m))!==0?0:v}function Fc(p){switch(p){case 2:p=1;break;case 8:p=4;break;case 32:p=16;break;case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:case 4194304:case 8388608:case 16777216:case 33554432:p=128;break;case 268435456:p=134217728;break;default:p=0}return p}function Bl(p){return p&=-p,2<p?8<p?(p&134217727)!==0?32:268435456:8:2}function sd(){var p=H.p;return p!==0?p:(p=window.event,p===void 0?32:b1e(p.type))}function Fl(p,m){var v=H.p;try{return H.p=p,m()}finally{H.p=v}}var ra=Math.random().toString(36).slice(2),Wr="__reactFiber$"+ra,Vn="__reactProps$"+ra,qo="__reactContainer$"+ra,Zs="__reactEvents$"+ra,Hc="__reactListeners$"+ra,Nh="__reactHandles$"+ra,Za="__reactResources$"
`).replace(h4t,"")}function Wge(p,m){return m=Uge(m),Uge(p)===m}function $r(p,m,v,S,$,z){switch(v){case"children":typeof S=="string"?m==="body"||m==="textarea"&&S===""||Xe(p,S):(typeof S=="number"||typeof S=="bigint")&&m!=="body"&&Xe(p,""+S);break;case"className":ql(p,"class",S);break;case"tabIndex":ql(p,"tabindex",S);break;case"dir":case"role":case"viewBox":case"width":case"height":ql(p,v,S);break;case"style":Yt(p,S,z);break;case"data":if(m!=="object"){ql(p,"data",S);break}case"src":case"href":if(S===""&&(m!=="a"||v!=="href")){p.removeAttribute(v);break}if(S==null||typeof S=="function"||typeof S=="symbol"||typeof S=="boolean"){p.removeAttribute(v);break}S=Ct(""+S),p.setAttribute(v,S);break;case"action":case"formAction":if(typeof S=="function"){p.setAttribute(v,"javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')");break}else typeof z=="function"&&(v==="formAction"?(m!=="input"&&$r(p,m,"name",$.name,$,null),$r(p,m,"formEncType",$.formEncType,$,null),$r(p,m,"formMethod",$.formMethod,$,null),$r(p,m,"formTarget",$.formTarget,$,null)):($r(p,m,"encType",$.encType,$,null),$r(p,m,"method",$.method,$,null),$r(p,m,"target",$.target,$,null)));if(S==null||typeof S=="symbol"||typeof S=="boolean"){p.removeAttribute(v);break}S=Ct(""+S),p.setAttribute(v,S);break;case"onClick":S!=null&&(p.onclick=Gt);break;case"onScroll":S!=null&&tr("scroll",p);break;case"onScrollEnd":S!=null&&tr("scrollend",p);break;case"dangerouslySetInnerHTML":if(S!=null){if(typeof S!="object"||!("__html"in S))throw Error(o(61));if(v=S.__html,v!=null){if($.children!=null)throw Error(o(60));p.innerHTML=v}}break;case"multiple":p.multiple=S&&typeof S!="function"&&typeof S!="symbol";break;case"muted":p.muted=S&&typeof S!="function"&&typeof S!="symbol";break;case"suppressContentEditableWarning":case"suppressHydrationWarning":case"defaultValue":case"defaultChecked":case"innerHTML":case"ref":break;case"autoFocus":break;case"xlinkHref":if(S==null||typeof S=="function"||typeof S=="boolean"||typeof S=="symbol"){p.removeAttribute("xlink:href");break}v=Ct(""+S),p.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",v);break;case"contentEditable":case"spellCheck":case"draggable":case"value":case"autoReverse":case"externalResourcesRequired":case"focusable":case"preserveAlpha":S!=null&&typeof S!="function"&&typeof S!="symbol"?p.setAttribute(v,""+S):p.removeAttribute(v);break;case"inert":case"allowFullScreen":case"async":case"autoPlay":case"controls":case"default":case"defer":case"disabled":case"disablePictureInPicture":case"disableRemotePlayback":case"formNoValidate":case"hidden":case"loop":case"noModule":case"noValidate":case"open":case"playsInline":case"readOnly":case"required":case"reversed":case"scoped":case"seamless":case"itemScope":S&&typeof S!="function"&&typeof S!="symbol"?p.setAttribute(v,""):p.removeAttribute(v);break;case"capture":case"download":S===!0?p.setAttribute(v,""):S!==!1&&S!=null&&typeof S!="function"&&typeof S!="symbol"?p.setAttribute(v,S):p.removeAttribute(v);break;case"cols":case"rows":case"size":case"span":S!=null&&typeof S!="function"&&typeof S!="symbol"&&!isNaN(S)&&1<=S?p.setAttribute(v,S):p.removeAttribute(v);break;case"rowSpan":case"start":S==null||typeof S=="function"||typeof S=="symbol"||isNaN(S)?p.removeAttribute(v):p.setAttribute(v,S);break;case"popover":tr("beforetoggle",p),tr("toggle",p),Vl(p,"popover",S);break;case"xlinkActuate":Uo(p,"http://www.w3.org/1999/xlink","xlink:actuate",S);break;case"xlinkArcrole":Uo(p,"http://www.w3.org/1999/xlink","xlink:arcrole",S);break;case"xlinkRole":Uo(p,"http://www.w3.org/1999/xlink","xlink:role",S);break;case"xlinkShow":Uo(p,"http://www.w3.org/1999/xlink","xlink:show",S);break;case"xlinkTitle":Uo(p,"http://www.w3.org/1999/xlink","xlink:title",S);break;case"xlinkType":Uo(p,"http://www.w3.org/1999/xlink","xlink:type",S);break;case"xmlBase":Uo(p,"http://www.w3.org/XML/1998/namespace","xm
.`.concat($nt,` {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
overflow: hidden `).concat(o,`;
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},Qnt=function(){E.useEffect(function(){return document.body.setAttribute(eg,(Jne()+1).toString()),function(){var e=Jne()-1;e<=0?document.body.removeAttribute(eg):document.body.setAttribute(eg,e.toString())}},[])},Jnt=function(e){var r=e.noRelative,n=e.noImportant,o=e.gapMode,a=o===void 0?"margin":o;Qnt();var i=E.useMemo(function(){return Xnt(a)},[a]);return E.createElement(Knt,{styles:Znt(i,!r,a,n?"":"!important")})},VR=!1;if(typeof window<"u")try{var G4=Object.defineProperty({},"passive",{get:function(){return VR=!0,!0}});window.addEventListener("test",G4,G4),window.removeEventListener("test",G4,G4)}catch{VR=!1}var tg=VR?{passive:!1}:!1,eot=function(e){return e.tagName==="TEXTAREA"},eoe=function(e,r){if(!(e instanceof Element))return!1;var n=window.getComputedStyle(e);return n[r]!=="hidden"&&!(n.overflowY===n.overflowX&&!eot(e)&&n[r]==="visible")},tot=function(e){return eoe(e,"overflowY")},rot=function(e){return eoe(e,"overflowX")},toe=function(e,r){var n=r.ownerDocument,o=r;do{typeof ShadowRoot<"u"&&o instanceof ShadowRoot&&(o=o.host);var a=roe(e,o);if(a){var i=noe(e,o),s=i[1],l=i[2];if(s>l)return!0}o=o.parentNode}while(o&&o!==n.body);return!1},not=function(e){var r=e.scrollTop,n=e.scrollHeight,o=e.clientHeight;return[r,n,o]},oot=function(e){var r=e.scrollLeft,n=e.scrollWidth,o=e.clientWidth;return[r,n,o]},roe=function(e,r){return e==="v"?tot(r):rot(r)},noe=function(e,r){return e==="v"?not(r):oot(r)},aot=function(e,r){return e==="h"&&r==="rtl"?-1:1},iot=function(e,r,n,o,a){var i=aot(e,window.getComputedStyle(r).direction),s=i*o,l=n.target,c=r.contains(l),u=!1,d=s>0,h=0,f=0;do{if(!l)break;var g=noe(e,l),b=g[0],x=g[1],w=g[2],k=x-w-i*b;(b||k)&&roe(e,l)&&(h+=k,f+=b);var C=l.parentNode;l=C&&C.nodeType===Node.DOCUMENT_FRAGMENT_NODE?C.host:C}while(!c&&l!==document.body||c&&(r.contains(l)||r===l));return(d&&Math.abs(h)<1||!d&&Math.abs(f)<1)&&(u=!0),u},X4=function(e){return"changedTouches"in e?[e.changedTouches[0].clientX,e.changedTouches[0].clientY]:[0,0]},ooe=function(e){return[e.deltaX,e.deltaY]},aoe=function(e){return e&&"current"in e?e.current:e},sot=function(e,r){return e[0]===r[0]&&e[1]===r[1]},lot=function(e){return`
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
.block-interactivity-`.concat(e,` {pointer-events: none;}
.allow-interactivity-`).concat(e,` {pointer-events: all;}
`)},cot=0,rg=[];function uot(e){var r=E.useRef([]),n=E.useRef([0,0]),o=E.useRef(),a=E.useState(cot++)[0],i=E.useState(Qne)[0],s=E.useRef(e);E.useEffect(function(){s.current=e},[e]),E.useEffect(function(){if(e.inert){document.body.classList.add("block-interactivity-".concat(a));var x=Dnt([e.lockRef.current],(e.shards||[]).map(aoe)).filter(Boolean);return x.forEach(function(w){return w.classList.add("allow-interactivity-".concat(a))}),function(){document.body.classList.remove("block-interactivity-".concat(a)),x.forEach(function(w){return w.classList.remove("allow-interactivity-".concat(a))})}}},[e.inert,e.lockRef.current,e.shards]);var l=E.useCallback(function(x,w){if("touches"in x&&x.touches.length===2||x.type==="wheel"&&x.ctrlKey)return!s.current.allowPinchZoom;var k=X4(x),C=n.current,_="deltaX"in x?x.deltaX:C[0]-k[0],T="deltaY"in x?x.deltaY:C[1]-k[1],A,R=x.target,D=Math.abs(_)>Math.abs(T)?"h":"v";if("touches"in x&&D==="h"&&R.type==="range")return!1;var N=toe(D,R);if(!N)return!0;if(N?A=D:(A=D==="v"?"h":"v",N=toe(D,R)),!N)return!1;if(!o.current&&"changedTouches"in x&&(_||T)&&(o.current=A),!A)return!0;var M=o.current||A;return iot(M,w,x,M==="h"?_:T)},[]),c=E.useCallback(function(x){var w=x;if(!(!rg.length||rg[rg.length-1]!==i)){var k="deltaY"in w?ooe(w):X4(w),C=r.current.filter(function(A){return A.name===w.type&&(A.target===w.target||w.target===A.shadowParent)&&sot(A.delta,k)})[0];if(C&&C.should){w.cancelable&&w.preventDefault();return}if(!C){var _=(s.current.shards||[]).map(aoe).filter(Boolean).filter(function(A){return A.contains(w.target)}),T=_.length>0?l(w,_[0]):!s.current.noIsolation;T&&w.cancelable&&w.preventDefault()}}},[]),u=E.useCallback(function(x,w,k,C){var _={name:x,delta:w,target:k,should:C,shadowParent:dot(k)};r.current.push(_),setTimeout(function(){r.current=r.current.filter(function(T){return T!==_})},1)},[]),d=E.useCallback(function(x){n.current=X4(x),o.current=void 0},[]),h=E.useCallback(function(x){u(x.type,ooe(x),x.target,l(x,e.lockRef.current))},[]),f=E.useCallback(function(x){u(x.type,X4(x),x.target,l(x,e.lockRef.current))},[]);E.useEffect(function(){return rg.push(i),e.setCallbacks({onScrollCapture:h,onWheelCapture:h,onTouchMoveCapture:f}),document.addEventListener("wheel",c,tg),document.addEventListener("touchmove",c,tg),document.addEventListener("touchstart",d,tg),function(){rg=rg.filter(function(x){return x!==i}),document.removeEventListener("wheel",c,tg),document.removeEventListener("touchmove",c,tg),document.removeEventListener("touchstart",d,tg)}},[]);var g=e.removeScrollBar,b=e.inert;return E.createElement(E.Fragment,null,b?E.createElement(i,{styles:lot(a)}):null,g?E.createElement(Jnt,{noRelative:e.noRelative,gapMode:e.gapMode}):null)}function dot(e){for(var r=null;e!==null;)e instanceof ShadowRoot&&(r=e.host,e=e.host),e=e.parentNode;return r}const pot=Bnt(Zne,uot);var ioe=E.forwardRef(function(e,r){return E.createElement(Y4,El({},e,{ref:r,sideCar:pot}))});ioe.classNames=Y4.classNames;function Bo(e){return Object.keys(e)}function hot(e){return e.replace(/[A-Z]/g,r=>`-${r.toLowerCase()}`)}function fot(e){return typeof e!="string"||!e.includes("var(--mantine-scale)")?e:e.match(/^calc\((.*?)\)$/)?.[1].split("*")[0].trim()}function K4(e){const r=fot(e);return typeof r=="number"?r:typeof r=="string"?r.includes("calc")||r.includes("var")?r:r.includes("px")?Number(r.replace("px","")):r.includes("rem")?Number(r.replace("rem",""))*16:r.includes("em")?Number(r.replace("em",""))*16:Number(r):NaN}function soe(e){return e==="0rem"?"0rem":`calc(${e} * var(--mantine-scale))`}function loe(e,{shouldScale:r=!1}={}){function n(o){if(o===0||o==="0")return`0${e}`;if(typeof o=="number"){const a=`${o/16}${e}`;return r?soe(a):a}if(typeof o=="string"){if(o===""||o.startsWith("calc(")||o.startsWith("clamp(")||o.includes("rgba("))return o;if(o.includes(","))return o.split(",").map(i=>n(i)).join(",");if(o.includes(" "))return o.split(" ").map(i=>n(i)).join(" ");const a=o.replace("px","");if(!Number.isNaN(Number(a))){const i=`${Number(a)/16}${e}`;return r?soe(i):i}}return o}return n}const qe=loe("rem",{shouldScale:!0});
`;let G,K=!0;const j=M.numbers=="binary",Y=M.numbers=="octal",Q=M.numbers=="decimal",J=M.numbers=="hexadecimal";if(L&&N&&b(N.toJSON)&&(N=N.toJSON()),!h(N)){if(x(N))return N.size==0?"new Map()":(P||(M.__inline1__=!0,M.__inline2__=!1),"new Map("+D(Array.from(N),M)+")");if(w(N))return N.size==0?"new Set()":"new Set("+D(Array.from(N),M)+")";if(u(N))return N.length==0?"Buffer.from([])":"Buffer.from("+D(Array.from(N),M)+")";if(c(N))return G=[],M.wrap=!0,q&&(M.__inline1__=!1,M.__inline2__=!0),Z||O(),a(N,ne=>{K=!1,Z&&(M.__inline2__=!1),G.push((P||Z?"":I)+D(ne,M))}),K?"[]":Z?"["+G.join(", ")+"]":"["+W+G.join(","+W)+W+(P?"":H)+"]";if(f(N)||g(N)){if(L)return JSON.stringify(Number(N));let ne;if(Q)ne=String(N);else if(J){let re=N.toString(16);V||(re=re.toUpperCase()),ne="0x"+re}else j?ne="0b"+N.toString(2):Y&&(ne="0o"+N.toString(8));return g(N)?ne+"n":ne}else return g(N)?L?JSON.stringify(Number(N)):N+"n":d(N)?(G=[],M.wrap=!0,O(),n(N,(ne,re)=>{K=!1,G.push((P?"":I)+D(ne,M)+":"+(P?"":" ")+D(re,M))}),K?"{}":"{"+W+G.join(","+W)+W+(P?"":H)+"}"):L?JSON.stringify(N)||"null":String(N)}const ie=M.escapeEverything?A:R;return G=N.replace(ie,(ne,re,ge,De,he,me)=>{if(re){if(M.minimal)return re;const Ie=re.charCodeAt(0),Ze=re.charCodeAt(1);if(M.es6){const rt=(Ie-55296)*1024+Ze-56320+65536;return"\\u{"+s(rt,V)+"}"}return i(s(Ie,V))+i(s(Ze,V))}if(ge)return i(s(ge.charCodeAt(0),V));if(ne=="\0"&&!L&&!_.test(me.charAt(he+1)))return"\\0";if(De)return De==U||M.escapeEverything?"\\"+De:De;if(C.test(ne))return k[ne];if(M.minimal&&!T.test(ne))return ne;const Te=s(ne.charCodeAt(0),V);return L||Te.length>2?i(Te):"\\x"+("00"+Te).slice(-2)}),U=="`"&&(G=G.replace(/\$\{/g,"\\${")),M.isScriptContext&&(G=G.replace(/<\/(script|style)/gi,"<\\/$1").replace(/<!--/g,L?"\\u003C!--":"\\x3C!--")),M.wrap&&(G=U+G+U),G};return D.version="3.0.2",OD=D,OD}Ddt();function $dt({children:e,log:r}){return typeof document<"u"?null:y.jsx("script",{className:"tsr-once",dangerouslySetInnerHTML:{__html:[e,"",'if (typeof __TSR_SSR__ !== "undefined") __TSR_SSR__.cleanScripts()'].filter(Boolean).join(`
`)}})}function Mdt(){const e=dh(),r=(e.options.getScrollRestorationKey||ele)(e.latestLocation),n=r!==ele(e.latestLocation)?r:null;return!e.isScrollRestoring||!e.isServer?null:y.jsx($dt,{children:`(${gdt.toString()})(${JSON.stringify(Qse)},${JSON.stringify(n)}, undefined, true)`,log:!1})}const Pdt=E.memo(function({matchId:e}){var r,n;const o=dh(),a=Bs({select:w=>{var k;return(k=w.matches.find(C=>C.id===e))==null?void 0:k.routeId}});Yk(a);const i=o.routesById[a],s=i.options.pendingComponent??o.options.defaultPendingComponent,l=s?y.jsx(s,{}):null,c=i.options.errorComponent??o.options.defaultErrorComponent,u=i.options.onCatch??o.options.defaultOnCatch,d=i.isRoot?i.options.notFoundComponent??((r=o.options.notFoundRoute)==null?void 0:r.options.component):i.options.notFoundComponent,h=(!i.isRoot||i.options.wrapInSuspense)&&(i.options.wrapInSuspense??s??((n=i.options.errorComponent)==null?void 0:n.preload))?E.Suspense:ID,f=c?rle:ID,g=d?Rdt:ID,b=Bs({select:w=>w.loadedAt}),x=Bs({select:w=>{var k;const C=w.matches.findIndex(_=>_.id===e);return(k=w.matches[C-1])==null?void 0:k.routeId}});return y.jsxs(y.Fragment,{children:[y.jsx(dle.Provider,{value:e,children:y.jsx(h,{fallback:l,children:y.jsx(f,{getResetKey:()=>b,errorComponent:c||$D,onCatch:(w,k)=>{if(Kk(w))throw w;u?.(w,k)},children:y.jsx(g,{fallback:w=>{if(!d||w.routeId&&w.routeId!==a||!w.routeId&&!i.isRoot)throw w;return E.createElement(d,w)},children:y.jsx(Idt,{matchId:e})})})})}),x===tle&&o.options.scrollRestoration?y.jsxs(y.Fragment,{children:[y.jsx(zdt,{}),y.jsx(Mdt,{})]}):null]})});function zdt(){var e;const r=dh(),n=E.useRef(void 0);return y.jsx("script",{suppressHydrationWarning:!0,ref:o=>{var a;o&&(n.current===void 0||n.current.href!==((a=r.state.resolvedLocation)==null?void 0:a.href))&&(r.emit({type:"onRendered",...bdt(r.state)}),n.current=r.state.resolvedLocation)}},(e=r.state.resolvedLocation)==null?void 0:e.state.key)}const Idt=E.memo(function({matchId:e}){var r,n,o;const a=dh(),{match:i,key:s,routeId:l}=Bs({select:h=>{const f=h.matches.findIndex(k=>k.id===e),g=h.matches[f],b=g.routeId,x=a.routesById[b].options.remountDeps??a.options.defaultRemountDeps,w=x?.({routeId:b,loaderDeps:g.loaderDeps,params:g._strictParams,search:g._strictSearch});return{key:w?JSON.stringify(w):void 0,routeId:b,match:hdt(g,["id","status","error"])}},structuralSharing:!0}),c=a.routesById[l],u=E.useMemo(()=>{const h=c.options.component??a.options.defaultComponent;return h?y.jsx(h,{},s):y.jsx(Odt,{})},[s,c.options.component,a.options.defaultComponent]),d=(c.options.errorComponent??a.options.defaultErrorComponent)||$D;if(i.status==="notFound")return Yk(Kk(i.error)),ple(a,c,i.error);if(i.status==="redirected")throw Yk(ydt(i.error)),(r=a.getMatch(i.id))==null?void 0:r.loadPromise;if(i.status==="error"){if(a.isServer)return y.jsx(d,{error:i.error,reset:void 0,info:{componentStack:""}});throw i.error}if(i.status==="pending"){const h=c.options.pendingMinMs??a.options.defaultPendingMinMs;if(h&&!((n=a.getMatch(i.id))!=null&&n.minPendingPromise)&&!a.isServer){const f=fdt();Promise.resolve().then(()=>{a.updateMatch(i.id,g=>({...g,minPendingPromise:f}))}),setTimeout(()=>{f.resolve(),a.updateMatch(i.id,g=>({...g,minPendingPromise:void 0}))},h)}throw(o=a.getMatch(i.id))==null?void 0:o.loadPromise}return u}),Odt=E.memo(function(){const e=dh(),r=E.useContext(dle),n=Bs({select:c=>{var u;return(u=c.matches.find(d=>d.id===r))==null?void 0:u.routeId}}),o=e.routesById[n],a=Bs({select:c=>{const u=c.matches.find(d=>d.id===r);return Yk(u),u.globalNotFound}}),i=Bs({select:c=>{var u;const d=c.matches,h=d.findIndex(f=>f.id===r);return(u=d[h+1])==null?void 0:u.id}});if(a)return ple(e,o,void 0);if(!i)return null;const s=y.jsx(Pdt,{matchId:i}),l=e.options.defaultPendingComponent?y.jsx(e.options.defaultPendingComponent,{}):null;return r===tle?y.jsx(E.Suspense,{fallback:l,children:s}):s}),jdt=typeof window<"u"?E.useLayoutEffect:E.useEffect;function Ldt(e,r,n={},o={}){const a=E.useRef(typeof IntersectionObserver=="function"),i=E.useRef(null);return E.useEffect(()=>{if(!(!e.current||!a.current||o.disabled))return i.current=n
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
`).replace(`
`,`
+`).split(`
`)),u=c.reduce((d,h)=>d.concat(...h),[]);return[c,u]}return[[],[]]},[e]);return E.useEffect(()=>{const c=r?.target??cue,u=r?.actInsideInputWithModifier??!0;if(e!==null){const d=g=>{if(a.current=g.ctrlKey||g.metaKey||g.shiftKey||g.altKey,(!a.current||a.current&&!u)&&Ece(g))return!1;const b=due(g.code,l);if(i.current.add(g[b]),uue(s,i.current,!1)){const x=g.composedPath?.()?.[0]||g.target,w=x?.nodeName==="BUTTON"||x?.nodeName==="A";r.preventDefault!==!1&&(a.current||!w)&&g.preventDefault(),o(!0)}},h=g=>{const b=due(g.code,l);uue(s,i.current,!0)?(o(!1),i.current.clear()):i.current.delete(g[b]),g.key==="Meta"&&i.current.clear(),a.current=!1},f=()=>{i.current.clear(),o(!1)};return c?.addEventListener("keydown",d),c?.addEventListener("keyup",h),window.addEventListener("blur",f),window.addEventListener("contextmenu",f),()=>{c?.removeEventListener("keydown",d),c?.removeEventListener("keyup",h),window.removeEventListener("blur",f),window.removeEventListener("contextmenu",f)}}},[e,o]),n}function uue(e,r,n){return e.filter(o=>n||o.length===r.size).some(o=>o.every(a=>r.has(a)))}function due(e,r){return r.includes(e)?"code":"key"}const Wgt=()=>{const e=Jr();return E.useMemo(()=>({zoomIn:r=>{const{panZoom:n}=e.getState();return n?n.scaleBy(1.2,{duration:r?.duration}):Promise.resolve(!1)},zoomOut:r=>{const{panZoom:n}=e.getState();return n?n.scaleBy(1/1.2,{duration:r?.duration}):Promise.resolve(!1)},zoomTo:(r,n)=>{const{panZoom:o}=e.getState();return o?o.scaleTo(r,{duration:n?.duration}):Promise.resolve(!1)},getZoom:()=>e.getState().transform[2],setViewport:async(r,n)=>{const{transform:[o,a,i],panZoom:s}=e.getState();return s?(await s.setViewport({x:r.x??o,y:r.y??a,zoom:r.zoom??i},n),Promise.resolve(!0)):Promise.resolve(!1)},getViewport:()=>{const[r,n,o]=e.getState().transform;return{x:r,y:n,zoom:o}},setCenter:async(r,n,o)=>e.getState().setCenter(r,n,o),fitBounds:async(r,n)=>{const{width:o,height:a,minZoom:i,maxZoom:s,panZoom:l}=e.getState(),c=a$(r,o,a,i,s,n?.padding??.1);return l?(await l.setViewport(c,{duration:n?.duration,ease:n?.ease,interpolate:n?.interpolate}),Promise.resolve(!0)):Promise.resolve(!1)},screenToFlowPosition:(r,n={})=>{const{transform:o,snapGrid:a,snapToGrid:i,domNode:s}=e.getState();if(!s)return r;const{x:l,y:c}=s.getBoundingClientRect(),u={x:r.x-l,y:r.y-c},d=n.snapGrid??a,h=n.snapToGrid??i;return zb(u,o,h,d)},flowToScreenPosition:r=>{const{transform:n,domNode:o}=e.getState();if(!o)return r;const{x:a,y:i}=o.getBoundingClientRect(),s=_5(r,n);return{x:s.x+a,y:s.y+i}}}),[])};function pue(e,r){const n=[],o=new Map,a=[];for(const i of e)if(i.type==="add"){a.push(i);continue}else if(i.type==="remove"||i.type==="replace")o.set(i.id,[i]);else{const s=o.get(i.id);s?s.push(i):o.set(i.id,[i])}for(const i of r){const s=o.get(i.id);if(!s){n.push(i);continue}if(s[0].type==="remove")continue;if(s[0].type==="replace"){n.push({...s[0].item});continue}const l={...i};for(const c of s)Ygt(c,l);n.push(l)}return a.length&&a.forEach(i=>{i.index!==void 0?n.splice(i.index,0,{...i.item}):n.push({...i.item})}),n}function Ygt(e,r){switch(e.type){case"select":{r.selected=e.selected;break}case"position":{typeof e.position<"u"&&(r.position=e.position),typeof e.dragging<"u"&&(r.dragging=e.dragging);break}case"dimensions":{typeof e.dimensions<"u"&&(r.measured??={},r.measured.width=e.dimensions.width,r.measured.height=e.dimensions.height,e.setAttributes&&((e.setAttributes===!0||e.setAttributes==="width")&&(r.width=e.dimensions.width),(e.setAttributes===!0||e.setAttributes==="height")&&(r.height=e.dimensions.height))),typeof e.resizing=="boolean"&&(r.resizing=e.resizing);break}}}function Ggt(e,r){return pue(e,r)}function Xgt(e,r){return pue(e,r)}function bh(e,r){return{id:e,type:"select",selected:r}}function Dg(e,r=new Set,n=!1){const o=[];for(const[a,i]of e){const s=r.has(a);!(i.selected===void 0&&!s)&&i.selected!==s&&(n&&(i.selected=s),o.push(bh(i.id,s)))}return o}function hue({items:e=[],lookup:r}){const n=[],o=new Map(e.map(a=>[a.id,a]));for(const[a,i]of e.entries()){const s=r.get(i.id),l=s?.internals?.userNode??s;l!==void 0&&l!==i&&n.push({id:i
M${N.x},${N.y}h${N.width}v${N.height}h${-N.width}z`,fillRule:"evenodd",pointerEvents:"none"})]})})}ede.displayName="MiniMap",E.memo(ede);const j0t=e=>r=>e?`${Math.max(1/r.transform[2],1)}`:void 0,L0t={[Ng.Line]:"right",[Ng.Handle]:"bottom-right"};function B0t({nodeId:e,position:r,variant:n=Ng.Handle,className:o,style:a=void 0,children:i,color:s,minWidth:l=10,minHeight:c=10,maxWidth:u=Number.MAX_VALUE,maxHeight:d=Number.MAX_VALUE,keepAspectRatio:h=!1,resizeDirection:f,autoScale:g=!0,shouldResize:b,onResizeStart:x,onResize:w,onResizeEnd:k}){const C=kue(),_=typeof e=="string"?e:C,T=Jr(),A=E.useRef(null),R=n===Ng.Handle,D=dr(E.useCallback(j0t(R&&g),[R,g]),ln),N=E.useRef(null),M=r??L0t[n];E.useEffect(()=>{if(!(!A.current||!_))return N.current||(N.current=wgt({domNode:A.current,nodeId:_,getStoreItems:()=>{const{nodeLookup:F,transform:L,snapGrid:U,snapToGrid:P,nodeOrigin:V,domNode:I}=T.getState();return{nodeLookup:F,transform:L,snapGrid:U,snapToGrid:P,nodeOrigin:V,paneDomNode:I}},onChange:(F,L)=>{const{triggerNodeChanges:U,nodeLookup:P,parentLookup:V,nodeOrigin:I}=T.getState(),H=[],q={x:F.x,y:F.y},Z=P.get(_);if(Z&&Z.expandParent&&Z.parentId){const W=Z.origin??I,G=F.width??Z.measured.width??0,K=F.height??Z.measured.height??0,j={id:Z.id,parentId:Z.parentId,rect:{width:G,height:K,...wce({x:F.x??Z.position.x,y:F.y??Z.position.y},{width:G,height:K},Z.parentId,P,W)}},Y=h$([j],P,V,I);H.push(...Y),q.x=F.x?Math.max(W[0]*G,F.x):void 0,q.y=F.y?Math.max(W[1]*K,F.y):void 0}if(q.x!==void 0&&q.y!==void 0){const W={id:_,type:"position",position:{...q}};H.push(W)}if(F.width!==void 0&&F.height!==void 0){const W={id:_,type:"dimensions",resizing:!0,setAttributes:f?f==="horizontal"?"width":"height":!0,dimensions:{width:F.width,height:F.height}};H.push(W)}for(const W of L){const G={...W,type:"position"};H.push(G)}U(H)},onEnd:({width:F,height:L})=>{const U={id:_,type:"dimensions",resizing:!1,dimensions:{width:F,height:L}};T.getState().triggerNodeChanges([U])}})),N.current.update({controlPosition:M,boundaries:{minWidth:l,minHeight:c,maxWidth:u,maxHeight:d},keepAspectRatio:h,resizeDirection:f,onResizeStart:x,onResize:w,onResizeEnd:k,shouldResize:b}),()=>{N.current?.destroy()}},[M,l,c,u,d,h,x,w,k,b]);const O=M.split("-");return y.jsx("div",{className:Bn(["react-flow__resize-control","nodrag",...O,n,o]),ref:A,style:{...a,scale:D,...s&&{[R?"backgroundColor":"borderColor"]:s}},children:i})}E.memo(B0t);var F0t=Object.getOwnPropertyNames,H0t=Object.getOwnPropertySymbols,V0t=Object.prototype.hasOwnProperty;function tde(e,r){return function(n,o,a){return e(n,o,a)&&r(n,o,a)}}function z5(e){return function(r,n,o){if(!r||!n||typeof r!="object"||typeof n!="object")return e(r,n,o);var a=o.cache,i=a.get(r),s=a.get(n);if(i&&s)return i===n&&s===r;a.set(r,n),a.set(n,r);var l=e(r,n,o);return a.delete(r),a.delete(n),l}}function q0t(e){return e?.[Symbol.toStringTag]}function rde(e){return F0t(e).concat(H0t(e))}var U0t=Object.hasOwn||(function(e,r){return V0t.call(e,r)});function vh(e,r){return e===r||!e&&!r&&e!==e&&r!==r}var W0t="__v",Y0t="__o",G0t="_owner",nde=Object.getOwnPropertyDescriptor,ode=Object.keys;function X0t(e,r,n){var o=e.length;if(r.length!==o)return!1;for(;o-- >0;)if(!n.equals(e[o],r[o],o,o,e,r,n))return!1;return!0}function K0t(e,r){return vh(e.getTime(),r.getTime())}function Z0t(e,r){return e.name===r.name&&e.message===r.message&&e.cause===r.cause&&e.stack===r.stack}function Q0t(e,r){return e===r}function ade(e,r,n){var o=e.size;if(o!==r.size)return!1;if(!o)return!0;for(var a=new Array(o),i=e.entries(),s,l,c=0;(s=i.next())&&!s.done;){for(var u=r.entries(),d=!1,h=0;(l=u.next())&&!l.done;){if(a[h]){h++;continue}var f=s.value,g=l.value;if(n.equals(f[0],g[0],c,h,e,r,n)&&n.equals(f[1],g[1],f[0],g[0],e,r,n)){d=a[h]=!0;break}h++}if(!d)return!1;c++}return!0}var J0t=vh;function eyt(e,r,n){var o=ode(e),a=o.length;if(ode(r).length!==a)return!1;for(;a-- >0;)if(!sde(e,r,n,o[a]))return!1;return!0}function Bb(e,r,n){var o=rde(e),a=o.length;if(rde(r).length!==a)return!1;for(var i,s,l;a-- >0;)if(i=o[a],!sde(e,r,n,i)||(s=nde(e,i),l=nde(r,i),(s||l)&&(!s||!l||s.conf
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
`).filter(i=>i),o=Math.min(...n.map(i=>i.length-i.trimStart().length)),a=n.map(i=>i.slice(o)).map(i=>" ".repeat(this.indent*2)+i);for(const i of a)this.content.push(i)}compile(){const r=Function,n=this?.args,o=[...(this?.content??[""]).map(a=>` ${a}`)];return new r(...n,o.join(`
`))}}const nxt={major:4,minor:0,patch:0},bn=Oe("$ZodType",(e,r)=>{var n;e??(e={}),e._zod.def=r,e._zod.bag=e._zod.bag||{},e._zod.version=nxt;const o=[...e._zod.def.checks??[]];e._zod.traits.has("$ZodCheck")&&o.unshift(e);for(const a of o)for(const i of a._zod.onattach)i(e);if(o.length===0)(n=e._zod).deferred??(n.deferred=[]),e._zod.deferred?.push(()=>{e._zod.run=e._zod.parse});else{const a=(i,s,l)=>{let c=Qb(i),u;for(const d of s){if(d._zod.def.when){if(!d._zod.def.when(i))continue}else if(c)continue;const h=i.issues.length,f=d._zod.check(i);if(f instanceof Promise&&l?.async===!1)throw new Xb;if(u||f instanceof Promise)u=(u??Promise.resolve()).then(async()=>{await f,i.issues.length!==h&&(c||(c=Qb(i,h)))});else{if(i.issues.length===h)continue;c||(c=Qb(i,h))}}return u?u.then(()=>i):i};e._zod.run=(i,s)=>{const l=e._zod.parse(i,s);if(l instanceof Promise){if(s.async===!1)throw new Xb;return l.then(c=>a(c,o,s))}return a(l,o,s)}}e["~standard"]={validate:a=>{try{const i=vvt(e,a);return i.success?{value:i.data}:{issues:i.error?.issues}}catch{return xvt(e,a).then(i=>i.success?{value:i.data}:{issues:i.error?.issues})}},vendor:"zod",version:1}}),K5=Oe("$ZodString",(e,r)=>{bn.init(e,r),e._zod.pattern=[...e?._zod.bag?.patterns??[]].pop()??Hvt(e._zod.bag),e._zod.parse=(n,o)=>{if(r.coerce)try{n.value=String(n.value)}catch{}return typeof n.value=="string"||n.issues.push({expected:"string",code:"invalid_type",input:n.value,inst:e}),n}}),tn=Oe("$ZodStringFormat",(e,r)=>{X5.init(e,r),K5.init(e,r)}),oxt=Oe("$ZodGUID",(e,r)=>{r.pattern??(r.pattern=Avt),tn.init(e,r)}),axt=Oe("$ZodUUID",(e,r)=>{if(r.version){const n={v1:1,v2:2,v3:3,v4:4,v5:5,v6:6,v7:7,v8:8}[r.version];if(n===void 0)throw new Error(`Invalid UUID version: "${r.version}"`);r.pattern??(r.pattern=mhe(n))}else r.pattern??(r.pattern=mhe());tn.init(e,r)}),ixt=Oe("$ZodEmail",(e,r)=>{r.pattern??(r.pattern=Rvt),tn.init(e,r)}),sxt=Oe("$ZodURL",(e,r)=>{tn.init(e,r),e._zod.check=n=>{try{const o=n.value,a=new URL(o),i=a.href;r.hostname&&(r.hostname.lastIndex=0,r.hostname.test(a.hostname)||n.issues.push({code:"invalid_format",format:"url",note:"Invalid hostname",pattern:Ovt.source,input:n.value,inst:e,continue:!r.abort})),r.protocol&&(r.protocol.lastIndex=0,r.protocol.test(a.protocol.endsWith(":")?a.protocol.slice(0,-1):a.protocol)||n.issues.push({code:"invalid_format",format:"url",note:"Invalid protocol",pattern:r.protocol.source,input:n.value,inst:e,continue:!r.abort})),!o.endsWith("/")&&i.endsWith("/")?n.value=i.slice(0,-1):n.value=i;return}catch{n.issues.push({code:"invalid_format",format:"url",input:n.value,inst:e,continue:!r.abort})}}}),lxt=Oe("$ZodEmoji",(e,r)=>{r.pattern??(r.pattern=Dvt()),tn.init(e,r)}),cxt=Oe("$ZodNanoID",(e,r)=>{r.pattern??(r.pattern=Cvt),tn.init(e,r)}),uxt=Oe("$ZodCUID",(e,r)=>{r.pattern??(r.pattern=wvt),tn.init(e,r)}),dxt=Oe("$ZodCUID2",(e,r)=>{r.pattern??(r.pattern=kvt),tn.init(e,r)}),pxt=Oe("$ZodULID",(e,r)=>{r.pattern??(r.pattern=_vt),tn.init(e,r)}),hxt=Oe("$ZodXID",(e,r)=>{r.pattern??(r.pattern=Evt),tn.init(e,r)}),fxt=Oe("$ZodKSUID",(e,r)=>{r.pattern??(r.pattern=Svt),tn.init(e,r)}),mxt=Oe("$ZodISODateTime",(e,r)=>{r.pattern??(r.pattern=Fvt(r)),tn.init(e,r)}),gxt=Oe("$ZodISODate",(e,r)=>{r.pattern??(r.pattern=Lvt),tn.init(e,r)}),yxt=Oe("$ZodISOTime",(e,r)=>{r.pattern??(r.pattern=Bvt(r)),tn.init(e,r)}),bxt=Oe("$ZodISODuration",(e,r)=>{r.pattern??(r.pattern=Tvt),tn.init(e,r)}),vxt=Oe("$ZodIPv4",(e,r)=>{r.pattern??(r.pattern=$vt),tn.init(e,r),e._zod.onattach.push(n=>{const o=n._zod.bag;o.format="ipv4"})}),xxt=Oe("$ZodIPv6",(e,r)=>{r.pattern??(r.pattern=Mvt),tn.init(e,r),e._zod.onattach.push(n=>{const o=n._zod.bag;o.format="ipv6"}),e._zod.check=n=>{try{new URL(`http://[${n.value}]`)}catch{n.issues.push({code:"invalid_format",format:"ipv6",input:n.value,inst:e,continue:!r.abort})}}}),wxt=Oe("$ZodCIDRv4",(e,r)=>{r.pattern??(r.pattern=Pvt),tn.init(e,r)}),kxt=Oe("$ZodCIDRv6",(e,r)=>{r.pattern??(r.pattern=zvt),tn.init(e,r),e._zod.check=n=>{const[o,a]=n.value.split("/");try{if(!a)throw new Error;const i=Number(a);if(`${i}`!==a)throw new Error;if(i<0||i>128)throw new Err
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
if (${C}.issues.length) {
if (input[${_}] === undefined) {
if (${_} in input) {
newResult[${_}] = undefined;
}
} else {
payload.issues = payload.issues.concat(
${C}.issues.map((iss) => ({
...iss,
path: iss.path ? [${_}, ...iss.path] : [${_}],
}))
);
}
} else if (${C}.value === undefined) {
if (${_} in input) newResult[${_}] = undefined;
} else {
newResult[${_}] = ${C}.value;
}
`)}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(d,k,C)};let a;const i=zM,s=!ihe.jitless,l=s&&svt.value,c=r.catchall;let u;e._zod.parse=(d,h)=>{u??(u=n.value);const f=d.value;if(!i(f))return d.issues.push({expected:"object",code:"invalid_type",input:f,inst:e}),d;const g=[];if(s&&l&&h?.async===!1&&h.jitless!==!0)a||(a=o(r.shape)),d=a(d,h);else{d.value={};const C=u.shape;for(const _ of u.keys){const T=C[_],A=T._zod.run({value:f[_],issues:[]},h),R=T._zod.optin==="optional"&&T._zod.optout==="optional";A instanceof Promise?g.push(A.then(D=>R?khe(D,d,_,f):Z5(D,d,_))):R?khe(A,d,_,f):Z5(A,d,_)}}if(!c)return g.length?Promise.all(g).then(()=>d):d;const b=[],x=u.keySet,w=c._zod,k=w.def.type;for(const C of Object.keys(f)){if(x.has(C))continue;if(k==="never"){b.push(C);continue}const _=w.run({value:f[C],issues:[]},h);_ instanceof Promise?g.push(_.then(T=>Z5(T,d,C))):Z5(_,d,C)}return b.length&&d.issues.push({code:"unrecognized_keys",keys:b,input:f,inst:e}),g.length?Promise.all(g).then(()=>d):d}});function _he(e,r,n,o){for(const a of e)if(a.issues.length===0)return r.value=a.value,r;return r.issues.push({code:"invalid_union",input:r.value,inst:n,errors:e.map(a=>a.issues.map(i=>Ah(i,o,Ch())))}),r}const Mxt=Oe("$ZodUnion",(e,r)=>{bn.init(e,r),en(e._zod,"optin",()=>r.options.some(n=>n._zod.optin==="optional")?"optional":void 0),en(e._zod,"optout",()=>r.options.some(n=>n._zod.optout==="optional")?"optional":void 0),en(e._zod,"values",()=>{if(r.options.every(n=>n._zod.values))return new Set(r.options.flatMap(n=>Array.from(n._zod.values)))}),en(e._zod,"pattern",()=>{if(r.options.every(n=>n._zod.pattern)){const n=r.options.map(o=>o._zod.pattern);return new RegExp(`^(${n.map(o=>MM(o.source)).join("|")})$`)}}),e._zod.parse=(n,o)=>{let a=!1;const i=[];for(const s of r.options){const l=s._zod.run({value:n.value,issues:[]},o);if(l instanceof Promise)i.push(l),a=!0;else{if(l.issues.length===0)return l;i.push(l)}}return a?Promise.all(i).then(s=>_he(s,n,e,o)):_he(i,n,e,o)}}),Pxt=Oe("$ZodIntersection",(e,r)=>{bn.init(e,r),e._zod.parse=(n,o)=>{const a=n.value,i=r.left._zod.run({value:a,issues:[]},o),s=r.right._zod.run({value:a,issues:[]},o);return i instanceof Promise||s instanceof Promise?Promise.all([i,s]).then(([l,c])=>Ehe(n,l,c)):Ehe(n,i,s)}});function LM(e,r){if(e===r)return{valid:!0,data:e};if(e instanceof Date&&r instanceof Date&&+e==+r)return{valid:!0,data:e};if(IM(e)&&IM(r)){const n=Object.keys(r),o=Object.keys(e).filter(i=>n.indexOf(i)!==-1),a={...e,...r};for(const i of o){const s=LM(e[i],r[i]);if(!s.valid)return{valid:!1,mergeErrorPath:[i,...s.mergeErrorPath]};a[i]=s.data}return{valid:!0,data:a}}if(Array.isArray(e)&&Array.isArray(r)){if(e.length!==r.length)return{valid:!1,mergeErrorPath:[]};const n=[];for(let o=0;o<e.length;o++){const a=e[o],i=r[o],s=LM(a,i);if(!s.valid)return{valid:!1,mergeErrorPath:[o,...s.mergeErrorPath]};n.push(s.data)}return{valid:!0,data:n}}return{valid:!1,mergeErrorPath:[]}}function Ehe(e,r,n){if(r.issues.length&&e.issues.push(...r.issues),n.issues.length&&e.issues.push(...n.issues),Qb(e))return e;const o=LM(r.value,n.value);if(!o.valid)throw new Error(`Unmergable intersection. Error path: ${JSON.stringify(o.mergeErrorPath)}`);return e.value=o.data,e}const zxt=Oe("$ZodEnum",(e,r)=>{bn.init(e,r);const n=avt(r.entries);e._zod.values=new Set(n),e._zod.pattern=new RegExp(`^(${n.filter(o=>lvt.has(typeof o)).map(o=>typeof o=="string"?Zb(o):o.toString()).join("|")})$`),e._zod.parse=(o,a)=>{const i=o.value;return e._zod.values.has(i)||o.issues.push({code:"invalid_value",values:n,input:i,inst:e}),o}}),Ixt=Oe("$ZodLiteral",(e,r)=>{bn.init(e,r),e._zod.values=new Set(r.values),e._zod.pattern=new RegExp(`^(${r.values.map(n=>typeof n=="string"?Zb(n):n?n.toString():String(n)).join("|")})$`),e._zod.parse=(n,o)=>{const a=n.value;return e._zod.values.has(a)||n.issues.push({code:"invalid_value",values:r.values,input:a,inst:e}),n}}),She=Oe("$ZodTransform",(e,r)=>{bn.init(e,r),e._zod.parse=(n,o)=>{const a=r.transform(n.value,n
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
:host {
display: block;
position: relative;
background-color: transparent;
width: 100%;
height: 100%;
box-sizing: border-box;
overflow: hidden;
border: 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=H2t.safeParse({viewId:this.getAttribute("view-id"),browser:this.getAttribute("browser")??void 0,dynamicViewVariant:this.getAttribute("dynamic-variant")??void 0});return r.success?r.data:(console.error("Invalid props",phe(r.error)),{viewId:"index"})}render(){const r=this.getProps();this.updateHostCss(),this.root??=Rnt.createRoot(this.shadow),this.root.render(y.jsx(Ent,{...r}))}attributeChangedCallback(r){this.root&&this.render()}}return customElements.define(Nnt.View,Whe),u6.LikeC4View=Whe,Object.defineProperty(u6,Symbol.toStringTag,{value:"Module"}),u6})({});
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
/* prettier-ignore-end */