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

396 lines
2.9 MiB
JavaScript
Raw Normal View History

2025-12-16 12:13:34 +01:00
var LikeC4Views=(function(h6){"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 Nme(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 HN(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var f6={exports:{}},Ig={};var UN;function Mme(){if(UN)return Ig;UN=1;var e=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function n(o,a,i){var l=null;if(i!==void 0&&(l=""+i),a.key!==void 0&&(l=""+a.key),"key"in a){i={};for(var s in a)s!=="key"&&(i[s]=a[s])}else i=a;return a=i.ref,{$$typeof:e,type:o,key:l,ref:a!==void 0?a:null,props:i}}return Ig.Fragment=r,Ig.jsx=n,Ig.jsxs=n,Ig}var WN;function Pme(){return WN||(WN=1,f6.exports=Mme()),f6.exports}var y=Pme(),m6={exports:{}},$t={};var GN;function Bme(){if(GN)return $t;GN=1;var e=Symbol.for("react.transitional.element"),r=Symbol.for("react.portal"),n=Symbol.for("react.fragment"),o=Symbol.for("react.strict_mode"),a=Symbol.for("react.profiler"),i=Symbol.for("react.consumer"),l=Symbol.for("react.context"),s=Symbol.for("react.forward_ref"),c=Symbol.for("react.suspense"),d=Symbol.for("react.memo"),u=Symbol.for("react.lazy"),p=Symbol.for("react.activity"),f=Symbol.iterator;function g(Y){return Y===null||typeof Y!="object"?null:(Y=f&&Y[f]||Y["@@iterator"],typeof Y=="function"?Y:null)}var v={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},w=Object.assign,x={};function k(Y,Z,I){this.props=Y,this.context=Z,this.refs=x,this.updater=I||v}k.prototype.isReactComponent={},k.prototype.setState=function(Y,Z){if(typeof Y!="object"&&typeof Y!="function"&&Y!=null)throw Error("takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,Y,Z,"setState")},k.prototype.forceUpdate=function(Y){this.updater.enqueueForceUpdate(this,Y,"forceUpdate")};function C(){}C.prototype=k.prototype;function _(Y,Z,I){this.props=Y,this.context=Z,this.refs=x,this.updater=I||v}var $=_.prototype=new C;$.constructor=_,w($,k.prototype),$.isPureReactComponent=!0;var z=Array.isArray;function T(){}var A={H:null,A:null,T:null,S:null},R=Object.prototype.hasOwnProperty;function j(Y,Z,I){var W=I.ref;return{$$typeof:e,type:Y,key:Z,ref:W!==void 0?W:null,props:I}}function O(Y,Z){return j(Y.type,Z,Y.props)}function P(Y){return typeof Y=="object"&&Y!==null&&Y.$$typeof===e}function L(Y){var Z={"=":"=0",":":"=2"};return"$"+Y.replace(/[=:]/g,function(I){return Z[I]})}var H=/\/+/g;function N(Y,Z){return typeof Y=="object"&&Y!==null&&Y.key!=null?L(""+Y.key):Z.toString(36)}function V(Y){switch(Y.status){case"fulfilled":return Y.value;case"rejected":throw Y.reason;default:switch(typeof Y.status=="string"?Y.then(T,T):(Y.status="pending",Y.then(function(Z){Y.status==="pending"&&(Y.status="fulfilled",Y.value=Z)},function(Z){Y.status==="pending"&&(Y.status="rejected",Y.reason=Z)})),Y.status){case"fulfilled":return Y.value;case"rejected":throw Y.reason}}throw Y}function B(Y,Z,I,W,K){var Q=typeof Y;(Q==="undefined"||Q==="boolean")&&(Y=null);var ae=!1;if(Y===null)ae=!0;else switch(Q){case"bigint":case"string":case"number":ae=!0;break;case"object":switch(Y.$$typeof){case e:case r:ae=!0;break;case u:return ae=Y._init,B(ae(Y._payload),Z,I,W,K)}}if(ae)return K=K(Y),ae=W===""?"."+N(Y,0):W,z(K)?(I="",ae!=null&&(I=ae.replace(H,"$&/")+"/"),B(K,Z,I,"",function(ue){return ue})):K!=null&&(P(K)&&(K=O(K,I+(K.key==null||Y&&Y.key===K.key?"":(""+K.key).replace(H,"$&/")+"/")+ae)),Z.push(K)),1;ae=0;var te=W===""?".":W+":";if(z(Y))for(var re=0;re<Y.length;re++)W=Y[re],Q=te+N(W,re),ae+=B(W,Z,I,Q,K);else if(re=g(Y),typeof re=="function")for(Y=re.call(Y),re=0;!(W=Y.next()).done;)W=W.value,Q=te+N(W,re++),ae+=B(W,Z,I,Q,K);else if(Q==="object"){if(typeof Y.then=="function")return B(V(Y),Z,I,W,K);throw Z=String(Y),Error("Objects are not valid as a React chi
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
\f\r &/=>`.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 x0e(e,r,n,o){const a=o.schema,i=a.space==="svg"?!1:o.settings.omitOptionalTags;let l=a.space==="svg"?o.settings.closeEmptyElements:o.settings.voids.includes(e.tagName.toLowerCase());const s=[];let c;a.space==="html"&&e.tagName==="svg"&&(o.schema=PP);const d=w0e(o,e.properties),u=o.all(a.space==="html"&&e.tagName==="template"?e.content:e);return o.schema=a,u&&(l=!1),(d||!i||!f0e(e,r,n))&&(s.push("<",e.tagName,d?" "+d:""),l&&(a.space==="svg"||o.settings.closeSelfClosing)&&(c=d.charAt(d.length-1),(!o.settings.tightSelfClosing||c==="/"||c&&c!=='"'&&c!=="'")&&s.push(" "),s.push("/")),s.push(">")),s.push(u),!l&&(!i||!l_(e,r,n))&&s.push("</"+e.tagName+">"),s.join("")}function w0e(e,r){const n=[];let o=-1,a;if(r){for(a in r)if(r[a]!==null&&r[a]!==void 0){const i=k0e(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 k0e(e,r,n){const o=Eye(e.schema,r),a=e.settings.allowParseErrors&&e.schema.space==="html"?0:1,i=e.settings.allowDangerousCharacters?0:1;let l=e.quote,s;if(o.overloadedBoolean&&(n===o.attribute||n==="")?n=!0:(o.boolean||o.overloadedBoolean)&&(typeof n!="string"||n===o.attribute||n==="")&&(n=!!n),n==null||n===!1||typeof n=="number"&&Number.isNaN(n))return"";const c=Ih(o.attribute,Object.assign({},e.settings.characterReferences,{subset:Cb.name[a][i]}));return n===!0||(n=Array.isArray(n)?(o.commaSeparated?Kye:Qye)(n,{padLeft:!e.settings.tightCommaSeparatedLists}):String(n),e.settings.collapseEmptyAttributes&&!n)?c:(e.settings.preferUnquoted&&(s=Ih(n,Object.assign({},e.settings.characterReferences,{attribute:!0,subset:Cb.unquoted[a][i]}))),s!==n&&(e.settings.quoteSmart&&Eb(n,l)>Eb(n,e.alternative)&&(l=e.alternative),s=l+Ih(n,Object.assign({},e.settings.characterReferences,{subset:(l==="'"?Cb.single:Cb.double)[a][i],attribute:!0}))+l),c+(s&&"="+s))}const _0e=["<","&"];function WP(e,r,n,o){return n&&n.type==="element"&&(n.tagName==="script"||n.tagName==="style")?e.value:Ih(e.value,Object.assign({},o.settings.characterReferences,{subset:_0e}))}function S0e(e,r,n,o){return o.settings.allowDangerousHtml?e.value:WP(e,r,n,o)}function E0e(e,r,n,o){return o.all(e)}const C0e=Rye("type",{invalid:$0e,unknown:z0e,handlers:{comment:Xye,doctype:Zye,element:x0e,raw:S0e,root:E0e,text:WP}});function $0e(e){throw new Error("Expected node, not `"+e+"`")}function z0e(e){const r=e;throw new Error("Cannot compile unknown node `"+r.type+"`")}const R0e={},T0e={},j0e=[];function A0e(e,r){const n=r||R0e,o=n.quote||'"',a=o==='"'?"'":'"';if(o!=='"'&&o!=="'")throw new Error("Invalid quote `"+o+"`, expected `'` or `\"`");return{one:D0e,all:N0e,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||bye,characterReferences:n.characterReferences||T0e,closeSelfClosing:n.closeSelfClosing||!1,closeEmptyElements:n.closeEmptyElements||!1},schema:n.space==="svg"?PP:zye,quote:o,alternative:a}.one(Array.isArray(e)?{type:"root",children:e}:e,void 0,void 0)}function D0e(e,r,n){return C0e(e,r,n,this)}function N0e(e){const r=[],n=e&&e.children||j0e;let o=-1;for(;++o<n.length;)r[o]=this.one(n[o],o,e);return r.join("")}function M0e(e){const r=this,n={...r.data("settings"),...e};r.compiler=o;function o(a){return A0e(a,n)}}function gxt(){}const Bo=Yc(/[A-Za-z]/),xo=Yc(/[\dA-Za-z]/),P0e=Yc(/[#-'*+\--9=?A-Z^-~]/);function $b(e){return e!==null&&(e<32
`:" ")+i.indentLines(i.containerFlow(o,s.current()),r?KP:wve))),d(),c}}function wve(e,r,n){return r===0?e:KP(e,r,n)}function KP(e,r,n){return(n?"":" ")+e}const kve=["autolink","destinationLiteral","destinationRaw","reference","titleQuote","titleApostrophe"];QP.peek=$ve;function _ve(){return{canContainEols:["delete"],enter:{strikethrough:Eve},exit:{strikethrough:Cve}}}function Sve(){return{unsafe:[{character:"~",inConstruct:"phrasing",notInConstruct:kve}],handlers:{delete:QP}}}function Eve(e){this.enter({type:"delete",children:[]},e)}function Cve(e){this.exit(e)}function QP(e,r,n,o){const a=n.createTracker(o),i=n.enter("strikethrough");let l=a.move("~~");return l+=n.containerPhrasing(e,{...a.current(),before:l,after:"~"}),l+=a.move("~~"),i(),l}function $ve(){return"~"}function zve(e){return e.length}function Rve(e,r){const n=r||{},o=(n.align||[]).concat(),a=n.stringLength||zve,i=[],l=[],s=[],c=[];let d=0,u=-1;for(;++u<e.length;){const w=[],x=[];let k=-1;for(e[u].length>d&&(d=e[u].length);++k<e[u].length;){const C=Tve(e[u][k]);if(n.alignDelimiters!==!1){const _=a(C);x[k]=_,(c[k]===void 0||_>c[k])&&(c[k]=_)}w.push(C)}l[u]=w,s[u]=x}let p=-1;if(typeof o=="object"&&"length"in o)for(;++p<d;)i[p]=JP(o[p]);else{const w=JP(o);for(;++p<d;)i[p]=w}p=-1;const f=[],g=[];for(;++p<d;){const w=i[p];let x="",k="";w===99?(x=":",k=":"):w===108?x=":":w===114&&(k=":");let C=n.alignDelimiters===!1?1:Math.max(1,c[p]-x.length-k.length);const _=x+"-".repeat(C)+k;n.alignDelimiters!==!1&&(C=x.length+C+k.length,C>c[p]&&(c[p]=C),g[p]=C),f[p]=_}l.splice(1,0,f),s.splice(1,0,g),u=-1;const v=[];for(;++u<l.length;){const w=l[u],x=s[u];p=-1;const k=[];for(;++p<d;){const C=w[p]||"";let _="",$="";if(n.alignDelimiters!==!1){const z=c[p]-(x[p]||0),T=i[p];T===114?_=" ".repeat(z):T===99?z%2?(_=" ".repeat(z/2+.5),$=" ".repeat(z/2-.5)):(_=" ".repeat(z/2),$=_):$=" ".repeat(z)}n.delimiterStart!==!1&&!p&&k.push("|"),n.padding!==!1&&!(n.alignDelimiters===!1&&C==="")&&(n.delimiterStart!==!1||p)&&k.push(" "),n.alignDelimiters!==!1&&k.push(_),k.push(C),n.alignDelimiters!==!1&&k.push($),n.padding!==!1&&k.push(" "),(n.delimiterEnd!==!1||p!==d-1)&&k.push("|")}v.push(n.delimiterEnd===!1?k.join("").replace(/ +$/,""):k.join(""))}return v.join(`
`)}function Tve(e){return e==null?"":String(e)}function JP(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 jve(e,r,n,o){const a=n.enter("blockquote"),i=n.createTracker(o);i.move("> "),i.shift(2);const l=n.indentLines(n.containerFlow(e,i.current()),Ave);return a(),l}function Ave(e,r,n){return">"+(n?"":" ")+e}function Dve(e,r){return eB(e,r.inConstruct,!0)&&!eB(e,r.notInConstruct,!1)}function eB(e,r,n){if(typeof r=="string"&&(r=[r]),!r||r.length===0)return n;let o=-1;for(;++o<r.length;)if(e.includes(r[o]))return!0;return!1}function tB(e,r,n,o){let a=-1;for(;++a<n.unsafe.length;)if(n.unsafe[a].character===`
2025-12-16 12:13:34 +01:00
`&&Dve(n.stack,n.unsafe[a]))return/[ \t]/.test(o.before)?"":" ";return`\\
`}function Nve(e,r){const n=String(e);let o=n.indexOf(r),a=o,i=0,l=0;if(typeof r!="string")throw new TypeError("Expected substring");for(;o!==-1;)o===a?++i>l&&(l=i):i=1,a=o+r.length,o=n.indexOf(r,a);return l}function Mve(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 Pve(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 Bve(e,r,n,o){const a=Pve(n),i=e.value||"",l=a==="`"?"GraveAccent":"Tilde";if(Mve(e,n)){const p=n.enter("codeIndented"),f=n.indentLines(i,Ove);return p(),f}const s=n.createTracker(o),c=a.repeat(Math.max(Nve(i,a)+1,3)),d=n.enter("codeFenced");let u=s.move(c);if(e.lang){const p=n.enter(`codeFencedLang${l}`);u+=s.move(n.safe(e.lang,{before:u,after:" ",encode:["`"],...s.current()})),p()}if(e.lang&&e.meta){const p=n.enter(`codeFencedMeta${l}`);u+=s.move(" "),u+=s.move(n.safe(e.meta,{before:u,after:`
2025-12-16 12:13:34 +01:00
`,encode:["`"],...s.current()})),p()}return u+=s.move(`
`),i&&(u+=s.move(i+`
`)),u+=s.move(c),d(),u}function Ove(e,r,n){return(n?"":" ")+e}function f_(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 Ive(e,r,n,o){const a=f_(n),i=a==='"'?"Quote":"Apostrophe",l=n.enter("definition");let s=n.enter("label");const c=n.createTracker(o);let d=c.move("[");return d+=c.move(n.safe(n.associationId(e),{before:d,after:"]",...c.current()})),d+=c.move("]: "),s(),!e.url||/[\0- \u007F]/.test(e.url)?(s=n.enter("destinationLiteral"),d+=c.move("<"),d+=c.move(n.safe(e.url,{before:d,after:">",...c.current()})),d+=c.move(">")):(s=n.enter("destinationRaw"),d+=c.move(n.safe(e.url,{before:d,after:e.title?" ":`
`,...c.current()}))),s(),e.title&&(s=n.enter(`title${i}`),d+=c.move(" "+a),d+=c.move(n.safe(e.title,{before:d,after:a,...c.current()})),d+=c.move(a),s()),l(),d}function Lve(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 Kg(e){return"&#x"+e.toString(16).toUpperCase()+";"}function Lh(e){if(e===null||Sr(e)||Eu(e))return 1;if(zb(e))return 2}function jb(e,r,n){const o=Lh(e),a=Lh(r);return o===void 0?a===void 0?n==="_"?{inside:!0,outside:!0}:{inside:!1,outside:!1}:a===1?{inside:!0,outside:!0}:{inside:!1,outside:!0}:o===1?a===void 0?{inside:!1,outside:!1}:a===1?{inside:!0,outside:!0}:{inside:!1,outside:!1}:a===void 0?{inside:!1,outside:!1}:a===1?{inside:!0,outside:!1}:{inside:!1,outside:!1}}rB.peek=Fve;function rB(e,r,n,o){const a=Lve(n),i=n.enter("emphasis"),l=n.createTracker(o),s=l.move(a);let c=l.move(n.containerPhrasing(e,{after:a,before:s,...l.current()}));const d=c.charCodeAt(0),u=jb(o.before.charCodeAt(o.before.length-1),d,a);u.inside&&(c=Kg(d)+c.slice(1));const p=c.charCodeAt(c.length-1),f=jb(o.after.charCodeAt(0),p,a);f.inside&&(c=c.slice(0,-1)+Kg(p));const g=l.move(a);return i(),n.attentionEncodeSurroundingInfo={after:f.outside,before:u.outside},s+c+g}function Fve(e,r,n){return n.options.emphasis||"*"}function m_(e,r,n,o){let a,i,l;typeof r=="function"&&typeof n!="function"?(i=void 0,l=r,a=n):(i=r,l=n,a=o),YP(e,i,s,a);function s(c,d){const u=d[d.length-1],p=u?u.children.indexOf(c):void 0;return l(c,p,u)}}const Vve={};function Ab(e,r){const n=r||Vve,o=typeof n.includeImageAlt=="boolean"?n.includeImageAlt:!0,a=typeof n.includeHtml=="boolean"?n.includeHtml:!0;return nB(e,o,a)}function nB(e,r,n){if(qve(e)){if("value"in e)return e.type==="html"&&!n?"":e.value;if(r&&"alt"in e&&e.alt)return e.alt;if("children"in e)return oB(e.children,r,n)}return Array.isArray(e)?oB(e,r,n):""}function oB(e,r,n){const o=[];let a=-1;for(;++a<e.length;)o[a]=nB(e[a],r,n);return o.join("")}function qve(e){return!!(e&&typeof e=="object")}function Hve(e,r){let n=!1;return m_(e,function(o){if("value"in o&&/\r?\n|\r/.test(o.value)||o.type==="break")return n=!0,d_}),!!((!e.depth||e.depth<3)&&Ab(e)&&(r.options.setext||n))}function Uve(e,r,n,o){const a=Math.max(Math.min(6,e.depth||1),1),i=n.createTracker(o);if(Hve(e,n)){const u=n.enter("headingSetext"),p=n.enter("phrasing"),f=n.containerPhrasing(e,{...i.current(),before:`
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
`,after:`
2025-12-16 12:13:34 +01:00
`});return p(),u(),f+`
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
`+(a===1?"=":"-").repeat(f.length-(Math.max(f.lastIndexOf("\r"),f.lastIndexOf(`
2025-12-16 12:13:34 +01:00
`))+1))}const l="#".repeat(a),s=n.enter("headingAtx"),c=n.enter("phrasing");i.move(l+" ");let d=n.containerPhrasing(e,{before:"# ",after:`
`,...i.current()});return/^[\t ]/.test(d)&&(d=Kg(d.charCodeAt(0))+d.slice(1)),d=d?l+" "+d:l,n.options.closeAtx&&(d+=" "+l),c(),s(),d}aB.peek=Wve;function aB(e){return e.value||""}function Wve(){return"<"}iB.peek=Gve;function iB(e,r,n,o){const a=f_(n),i=a==='"'?"Quote":"Apostrophe",l=n.enter("image");let s=n.enter("label");const c=n.createTracker(o);let d=c.move("![");return d+=c.move(n.safe(e.alt,{before:d,after:"]",...c.current()})),d+=c.move("]("),s(),!e.url&&e.title||/[\0- \u007F]/.test(e.url)?(s=n.enter("destinationLiteral"),d+=c.move("<"),d+=c.move(n.safe(e.url,{before:d,after:">",...c.current()})),d+=c.move(">")):(s=n.enter("destinationRaw"),d+=c.move(n.safe(e.url,{before:d,after:e.title?" ":")",...c.current()}))),s(),e.title&&(s=n.enter(`title${i}`),d+=c.move(" "+a),d+=c.move(n.safe(e.title,{before:d,after:a,...c.current()})),d+=c.move(a),s()),d+=c.move(")"),l(),d}function Gve(){return"!"}lB.peek=Yve;function lB(e,r,n,o){const a=e.referenceType,i=n.enter("imageReference");let l=n.enter("label");const s=n.createTracker(o);let c=s.move("![");const d=n.safe(e.alt,{before:c,after:"]",...s.current()});c+=s.move(d+"]["),l();const u=n.stack;n.stack=[],l=n.enter("reference");const p=n.safe(n.associationId(e),{before:c,after:"]",...s.current()});return l(),n.stack=u,i(),a==="full"||!d||d!==p?c+=s.move(p+"]"):a==="shortcut"?c=c.slice(0,-1):c+=s.move("]"),c}function Yve(){return"!"}sB.peek=Xve;function sB(e,r,n){let o=e.value||"",a="`",i=-1;for(;new RegExp("(^|[^`])"+a+"([^`]|$)").test(o);)a+="`";for(/[^ \r\n]/.test(o)&&(/^[ \r\n]/.test(o)&&/[ \r\n]$/.test(o)||/^`|`$/.test(o))&&(o=" "+o+" ");++i<n.unsafe.length;){const l=n.unsafe[i],s=n.compilePattern(l);let c;if(l.atBreak)for(;c=s.exec(o);){let d=c.index;o.charCodeAt(d)===10&&o.charCodeAt(d-1)===13&&d--,o=o.slice(0,d)+" "+o.slice(c.index+1)}}return a+o+a}function Xve(){return"`"}function cB(e,r){const n=Ab(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))}dB.peek=Zve;function dB(e,r,n,o){const a=f_(n),i=a==='"'?"Quote":"Apostrophe",l=n.createTracker(o);let s,c;if(cB(e,n)){const u=n.stack;n.stack=[],s=n.enter("autolink");let p=l.move("<");return p+=l.move(n.containerPhrasing(e,{before:p,after:">",...l.current()})),p+=l.move(">"),s(),n.stack=u,p}s=n.enter("link"),c=n.enter("label");let d=l.move("[");return d+=l.move(n.containerPhrasing(e,{before:d,after:"](",...l.current()})),d+=l.move("]("),c(),!e.url&&e.title||/[\0- \u007F]/.test(e.url)?(c=n.enter("destinationLiteral"),d+=l.move("<"),d+=l.move(n.safe(e.url,{before:d,after:">",...l.current()})),d+=l.move(">")):(c=n.enter("destinationRaw"),d+=l.move(n.safe(e.url,{before:d,after:e.title?" ":")",...l.current()}))),c(),e.title&&(c=n.enter(`title${i}`),d+=l.move(" "+a),d+=l.move(n.safe(e.title,{before:d,after:a,...l.current()})),d+=l.move(a),c()),d+=l.move(")"),s(),d}function Zve(e,r,n){return cB(e,n)?"<":"["}uB.peek=Kve;function uB(e,r,n,o){const a=e.referenceType,i=n.enter("linkReference");let l=n.enter("label");const s=n.createTracker(o);let c=s.move("[");const d=n.containerPhrasing(e,{before:c,after:"]",...s.current()});c+=s.move(d+"]["),l();const u=n.stack;n.stack=[],l=n.enter("reference");const p=n.safe(n.associationId(e),{before:c,after:"]",...s.current()});return l(),n.stack=u,i(),a==="full"||!d||d!==p?c+=s.move(p+"]"):a==="shortcut"?c=c.slice(0,-1):c+=s.move("]"),c}function Kve(){return"["}function g_(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 Qve(e){const r=g_(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 Jve(e){const r=e.options.bulletOrdered||".";if(r!=="."
2025-12-16 12:13:34 +01:00
`,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:l,tableCell:c,tableRow:s}};function l(g,v,w,x){return d(u(g,w,x),g.align)}function s(g,v,w,x){const k=p(g,w,x),C=d([k]);return C.slice(0,C.indexOf(`
`))}function c(g,v,w,x){const k=w.enter("tableCell"),C=w.enter("phrasing"),_=w.containerPhrasing(g,{...x,before:i,after:i});return C(),k(),_}function d(g,v){return Rve(g,{align:v,alignDelimiters:o,padding:n,stringLength:a})}function u(g,v,w){const x=g.children;let k=-1;const C=[],_=v.enter("table");for(;++k<x.length;)C[k]=p(x[k],v,w);return _(),C}function p(g,v,w){const x=g.children;let k=-1;const C=[],_=v.enter("tableRow");for(;++k<x.length;)C[k]=c(x[k],g,v,w);return _(),C}function f(g,v,w){let x=fB.inlineCode(g,v,w);return w.stack.includes("tableCell")&&(x=x.replace(/\|/g,"\\$&")),x}}function kbe(){return{exit:{taskListCheckValueChecked:vB,taskListCheckValueUnchecked:vB,paragraph:Sbe}}}function _be(){return{unsafe:[{atBreak:!0,character:"-",after:"[:|-]"}],handlers:{listItem:Ebe}}}function vB(e){const r=this.stack[this.stack.length-2];r.type,r.checked=e.type==="taskListCheckValueChecked"}function Sbe(e){const r=this.stack[this.stack.length-2];if(r&&r.type==="listItem"&&typeof r.checked=="boolean"){const n=this.stack[this.stack.length-1];n.type;const o=n.children[0];if(o&&o.type==="text"){const a=r.children;let i=-1,l;for(;++i<a.length;){const s=a[i];if(s.type==="paragraph"){l=s;break}}l===n&&(o.value=o.value.slice(1),o.value.length===0?n.children.shift():n.position&&o.position&&typeof o.position.start.offset=="number"&&(o.position.start.column++,o.position.start.offset++,n.position.start=Object.assign({},o.position.start)))}}this.exit(e)}function Ebe(e,r,n,o){const a=e.children[0],i=typeof e.checked=="boolean"&&a&&a.type==="paragraph",l="["+(e.checked?"x":" ")+"] ",s=n.createTracker(o);i&&s.move(l);let c=fB.listItem(e,r,n,{...o,...s.current()});return i&&(c=c.replace(/^(?:[*+-]|\d+\.)([\r\n]| {1,3})/,d)),c;function d(u){return u+l}}function Cbe(){return[Q0e(),bve(),_ve(),mbe(),kbe()]}function $be(e){return{extensions:[J0e(),xve(e),Sve(),wbe(e),_be()]}}function ya(e,r,n,o){const a=e.length;let i=0,l;if(r<0?r=-r>a?0:a+r:r=r>a?a:r,n=n>0?n:0,o.length<1e4)l=Array.from(o),l.unshift(r,n),e.splice(...l);else for(n&&e.splice(r,n);i<o.length;)l=o.slice(i,i+1e4),l.unshift(r,0),e.splice(...l),i+=1e4,r+=1e4}function Xa(e,r){return e.length>0?(ya(e,e.length,0,r),e):r}const bB={}.hasOwnProperty;function xB(e){const r={};let n=-1;for(;++n<e.length;)zbe(r,e[n]);return r}function zbe(e,r){let n;for(n in r){const a=(bB.call(e,n)?e[n]:void 0)||(e[n]={}),i=r[n];let l;if(i)for(l in i){bB.call(a,l)||(a[l]=[]);const s=i[l];Rbe(a[l],Array.isArray(s)?s:s?[s]:[])}}}function Rbe(e,r){let n=-1;const o=[];for(;++n<r.length;)(r[n].add==="after"?e:o).push(r[n]);ya(e,0,0,o)}const Tbe={tokenize:Pbe,partial:!0},wB={tokenize:Bbe,partial:!0},kB={tokenize:Obe,partial:!0},_B={tokenize:Ibe,partial:!0},jbe={tokenize:Lbe,partial:!0},SB={name:"wwwAutolink",tokenize:Nbe,previous:CB},EB={name:"protocolAutolink",tokenize:Mbe,previous:$B},Ps={name:"emailAutolink",tokenize:Dbe,previous:zB},Fl={};function Abe(){return{text:Fl}}let Cu=48;for(;Cu<123;)Fl[Cu]=Ps,Cu++,Cu===58?Cu=65:Cu===91&&(Cu=97);Fl[43]=Ps,Fl[45]=Ps,Fl[46]=Ps,Fl[95]=Ps,Fl[72]=[Ps,EB],Fl[104]=[Ps,EB],Fl[87]=[Ps,SB],Fl[119]=[Ps,SB];function Dbe(e,r,n){const o=this;let a,i;return l;function l(p){return!b_(p)||!zB.call(o,o.previous)||x_(o.events)?n(p):(e.enter("literalAutolink"),e.enter("literalAutolinkEmail"),s(p))}function s(p){return b_(p)?(e.consume(p),s):p===64?(e.consume(p),c):n(p)}function c(p){return p===46?e.check(jbe,u,d)(p):p===45||p===95||xo(p)?(i=!0,e.consume(p),c):u(p)}function d(p){return e.consume(p),a=!0,c}function u(p){return i&&a&&Bo(o.previous)?(e.exit("literalAutolinkEmail"),e.exit("literalAutolink"),r(p)):n(p)}}function Nbe(e,r,n){const o=this;return a;function a(l){return l!==87&&l!==119||!CB.call(o,o.previous)||x_(o.events)?n(l):(e.enter("literalAutolink"),e.enter("literalAutolinkWww"),e.check(Tbe,e.attempt(wB,e.attempt(kB,i),n),n)(l))}function i(l){return e.exit("literalAutolinkWww"),e.exit("literalAutolink"),r(l)}}function Mbe(e,r,n){const o=this;let a="",i=!1;return l;function l(p){return(p===72||p===104)&&$B.call(o,o.previous)&&!x_(o.events)?(e.enter("literalAutolink"),e.enter(
2025-12-16 12:13:34 +01:00
`)&&(u.children[0]={type:"text",value:f.replace(g,"").replace(/^\n+/,"")}),!f.includes(`
`))){const w=[];u.children.forEach((x,k)=>{k!=0&&(k==1&&x.type==="break"||w.push(x))}),u.children=[...w]}}return u});l&&(o.data={hName:r,hProperties:{className:["markdown-alert",`markdown-alert-${l}`],dir:"auto"}},d.unshift({type:"paragraph",children:[zwe(l),{type:"text",value:s.replace(/^\//,"")}],data:{hProperties:{className:"markdown-alert-title",dir:"auto"}}})),o.children=[...d]})};function zwe(e){let r=Rwe[e]??"";return{type:"emphasis",data:{hName:"svg",hProperties:{className:["octicon"],viewBox:"0 0 16 16",width:"16",height:"16",ariaHidden:"true"}},children:[{type:"emphasis",data:{hName:"path",hProperties:{d:r}},children:[]}]}}const Rwe={note:"M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z",tip:"M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z",important:"M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z",warning:"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z",caution:"M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"},Twe={tokenize:jwe};function jwe(e){const r=e.attempt(this.parser.constructs.contentInitial,o,a);let n;return r;function o(s){if(s===null){e.consume(s);return}return e.enter("lineEnding"),e.consume(s),e.exit("lineEnding"),Kt(e,r,"linePrefix")}function a(s){return e.enter("paragraph"),i(s)}function i(s){const c=e.enter("chunkText",{contentType:"text",previous:n});return n&&(n.next=c),n=c,l(s)}function l(s){if(s===null){e.exit("chunkText"),e.exit("paragraph"),e.consume(s);return}return gt(s)?(e.consume(s),e.exit("chunkText"),i):(e.consume(s),l)}}const Awe={tokenize:Dwe},VB={tokenize:Nwe};function Dwe(e){const r=this,n=[];let o=0,a,i,l;return s;function s(_){if(o<n.length){const $=n[o];return r.containerState=$[1],e.attempt($[0].continuation,c,d)(_)}return d(_)}function c(_){if(o++,r.containerState._closeFlow){r.containerState._closeFlow=void 0,a&&C();const $=r.events.length;let z=$,T;for(;z--;)if(r.events[z][0]==="exit"&&r.events[z][1].type==="chunkFlow"){T=r.events[z][1].end;break}k(o);let A=$;for(;A<r.events.length;)r.events[A][1].end={...T},A++;return ya(r.events,z+1,0,r.events.slice($)),r.events.length=A,d(_)}return s(_)}function d(_){if(o===n.length){if(!a)return f(_);if(a.currentConstruct&&a.currentConstruct.concrete)return v(_);r.interrupt=!!(a.currentConstruct&&!a._gfmTableDynamicInterruptHack)}return r.containerState={}
2025-12-16 12:13:34 +01:00
`;break}case-3:{l=`\r
`;break}case-2:{l=r?" ":" ";break}case-1:{if(!r&&a)continue;l=" ";break}default:l=String.fromCharCode(i)}a=i===-2,o.push(l)}return o.join("")}function Uwe(e){const o={constructs:xB([Fwe,...(e||{}).extensions||[]]),content:a(Twe),defined:[],document:a(Awe),flow:a(Mwe),lazy:{},string:a(Owe),text:a(Iwe)};return o;function a(i){return l;function l(s){return Vwe(o,i,s)}}}function Wwe(e){for(;!MB(e););return e}const UB=/[\0\t\n\r]/g;function Gwe(){let e=1,r="",n=!0,o;return a;function a(i,l,s){const c=[];let d,u,p,f,g;for(i=r+(typeof i=="string"?i.toString():new TextDecoder(l||void 0).decode(i)),p=0,r="",n&&(i.charCodeAt(0)===65279&&p++,n=void 0);p<i.length;){if(UB.lastIndex=p,d=UB.exec(i),f=d&&d.index!==void 0?d.index:i.length,g=i.charCodeAt(f),!d){r=i.slice(p);break}if(g===10&&p===f&&o)c.push(-3),o=void 0;else switch(o&&(c.push(-5),o=void 0),p<f&&(c.push(i.slice(p,f)),e+=f-p),g){case 0:{c.push(65533),e++;break}case 9:{for(u=Math.ceil(e/4)*4,c.push(-2);e++<u;)c.push(-1);break}case 10:{c.push(-4),e=1;break}default:o=!0,e=1}p=f+1}return s&&(o&&c.push(-5),r&&c.push(r),c.push(null)),c}}function t1(e){return!e||typeof e!="object"?"":"position"in e||"type"in e?WB(e.position):"start"in e||"end"in e?WB(e):"line"in e||"column"in e?E_(e):""}function E_(e){return GB(e&&e.line)+":"+GB(e&&e.column)}function WB(e){return E_(e&&e.start)+"-"+E_(e&&e.end)}function GB(e){return e&&typeof e=="number"?e:1}const YB={}.hasOwnProperty;function XB(e,r,n){return typeof r!="string"&&(n=r,r=void 0),Ywe(n)(Wwe(Uwe(n).document().write(Gwe()(e,r,!0))))}function Ywe(e){const r={transforms:[],canContainEols:["emphasis","fragment","heading","paragraph","strong"],enter:{autolink:i(Le),autolinkProtocol:j,autolinkEmail:j,atxHeading:i(De),blockQuote:i(ue),characterEscape:j,characterReference:j,codeFenced:i(_e),codeFencedFenceInfo:l,codeFencedFenceMeta:l,codeIndented:i(_e,l),codeText:i(ce,l),codeTextData:j,data:j,codeFlowValue:j,definition:i(pe),definitionDestinationString:l,definitionLabelString:l,definitionTitleString:l,emphasis:i(xe),hardBreakEscape:i(Be),hardBreakTrailing:i(Be),htmlFlow:i(Je,l),htmlFlowData:j,htmlText:i(Je,l),htmlTextData:j,image:i(st),label:l,link:i(Le),listItem:i(Ve),listItemValue:f,listOrdered:i(St,p),listUnordered:i(St),paragraph:i(qe),reference:I,referenceString:l,resourceDestinationString:l,resourceTitleString:l,setextHeading:i(De),strong:i(Xe),thematicBreak:i(Et)},exit:{atxHeading:c(),atxHeadingSequence:z,autolink:c(),autolinkEmail:re,autolinkProtocol:te,blockQuote:c(),characterEscapeValue:O,characterReferenceMarkerHexadecimal:K,characterReferenceMarkerNumeric:K,characterReferenceValue:Q,characterReference:ae,codeFenced:c(x),codeFencedFence:w,codeFencedFenceInfo:g,codeFencedFenceMeta:v,codeFlowValue:O,codeIndented:c(k),codeText:c(V),codeTextData:O,data:O,definition:c(),definitionDestinationString:$,definitionLabelString:C,definitionTitleString:_,emphasis:c(),hardBreakEscape:c(L),hardBreakTrailing:c(L),htmlFlow:c(H),htmlFlowData:O,htmlText:c(N),htmlTextData:O,image:c(F),label:G,labelText:q,lineEnding:P,link:c(B),listItem:c(),listOrdered:c(),listUnordered:c(),paragraph:c(),referenceString:W,resourceDestinationString:U,resourceTitleString:Y,resource:Z,setextHeading:c(R),setextHeadingLineSequence:A,setextHeadingText:T,strong:c(),thematicBreak:c()}};ZB(r,(e||{}).mdastExtensions||[]);const n={};return o;function o(be){let ke={type:"root",children:[]};const Ye={stack:[ke],tokenStack:[],config:r,enter:s,exit:d,buffer:l,resume:u,data:n},yt=[];let xt=-1;for(;++xt<be.length;)if(be[xt][1].type==="listOrdered"||be[xt][1].type==="listUnordered")if(be[xt][0]==="enter")yt.push(xt);else{const Tr=yt.pop();xt=a(be,Tr,xt)}for(xt=-1;++xt<be.length;){const Tr=r[be[xt][0]];YB.call(Tr,be[xt][1].type)&&Tr[be[xt][1].type].call(Object.assign({sliceSerialize:be[xt][2].sliceSerialize},Ye),be[xt][1])}if(Ye.tokenStack.length>0){const Tr=Ye.tokenStack[Ye.tokenStack.length-1];(Tr[1]||KB).call(Ye,void 0,Tr[0])}for(ke.position={start:Xc(be.length>0?be[0][1].start:{line:1,column:1,offset:0}),end:Xc(be.length>0?be[be.length-2][1].end:{line:1,column:1,offset:0})},xt=-1;++
2025-12-16 12:13:34 +01:00
`}]}function Jwe(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 e3e(e,r){const n={type:"element",tagName:"del",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}function t3e(e,r){const n={type:"element",tagName:"em",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}function r3e(e,r){const n=typeof e.options.clobberPrefix=="string"?e.options.clobberPrefix:"user-content-",o=String(r.identifier).toUpperCase(),a=Fh(o.toLowerCase()),i=e.footnoteOrder.indexOf(o);let l,s=e.footnoteCounts.get(o);s===void 0?(s=0,e.footnoteOrder.push(o),l=e.footnoteOrder.length):l=i+1,s+=1,e.footnoteCounts.set(o,s);const c={type:"element",tagName:"a",properties:{href:"#"+n+"fn-"+a,id:n+"fnref-"+a+(s>1?"-"+s:""),dataFootnoteRef:!0,ariaDescribedBy:["footnote-label"]},children:[{type:"text",value:String(l)}]};e.patch(r,c);const d={type:"element",tagName:"sup",properties:{},children:[c]};return e.patch(r,d),e.applyData(r,d)}function n3e(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 o3e(e,r){if(e.options.allowDangerousHtml){const n={type:"raw",value:r.value};return e.patch(r,n),e.applyData(r,n)}}function QB(e,r){const n=r.referenceType;let o="]";if(n==="collapsed"?o+="[]":n==="full"&&(o+="["+(r.label||r.identifier)+"]"),r.type==="imageReference")return[{type:"text",value:"!["+r.alt+o}];const a=e.all(r),i=a[0];i&&i.type==="text"?i.value="["+i.value:a.unshift({type:"text",value:"["});const l=a[a.length-1];return l&&l.type==="text"?l.value+=o:a.push({type:"text",value:o}),a}function a3e(e,r){const n=String(r.identifier).toUpperCase(),o=e.definitionById.get(n);if(!o)return QB(e,r);const a={src:Fh(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 i3e(e,r){const n={src:Fh(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 l3e(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 s3e(e,r){const n=String(r.identifier).toUpperCase(),o=e.definitionById.get(n);if(!o)return QB(e,r);const a={href:Fh(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 c3e(e,r){const n={href:Fh(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 d3e(e,r,n){const o=e.all(r),a=n?u3e(n):JB(r),i={},l=[];if(typeof r.checked=="boolean"){const u=o[0];let p;u&&u.type==="element"&&u.tagName==="p"?p=u:(p={type:"element",tagName:"p",properties:{},children:[]},o.unshift(p)),p.children.length>0&&p.children.unshift({type:"text",value:" "}),p.children.unshift({type:"element",tagName:"input",properties:{type:"checkbox",checked:r.checked,disabled:!0},children:[]}),i.className=["task-list-item"]}let s=-1;for(;++s<o.length;){const u=o[s];(a||s!==0||u.type!=="element"||u.tagName!=="p")&&l.push({type:"text",value:`
`}),u.type==="element"&&u.tagName==="p"&&!a?l.push(...u.children):l.push(u)}const c=o[o.length-1];c&&(a||c.type!=="element"||c.tagName!=="p")&&l.push({type:"text",value:`
`});const d={type:"element",tagName:"li",properties:i,children:l};return e.patch(r,d),e.applyData(r,d)}function u3e(e){let r=!1;if(e.type==="list"){r=e.spread||!1;const n=e.children;let o=-1;for(;!r&&++o<n.length;)r=JB(n[o])}return r}function JB(e){const r=e.spread;return r??e.children.length>1}function p3e(e,r){const n={},o=e.all(r);let a=-1;for(typeof r.start=="number"&&r.start!==1&&(n.start=r.start);++a<o.length;){const l=o[a];if(l.type==="element"&&l.tagName==="li"&&l.properties&&Array.isArray(l.properties.className)&&l.properties.className.includes("task-list-item")){n.className=["contains-task-list"];break}}const i={type:"element",tagName:r.ordered?"ol":"ul",properties:n,children:e.wrap(o,!0)};return e.patch(r,i),e.applyData(r,i)}function h3e(e,r){const n={type:"element",tagName:"p",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}function f3e(e,r){const n={type:"root",children:e.wrap(e.all(r))};return e.patch(r,n),e.applyData(r,n)}function m3e(e,r){const n={type:"element",tagName:"strong",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}function g3e(e,r){const n=e.all(r),o=n.shift(),a=[];if(o){const l={type:"element",tagName:"thead",properties:{},children:e.wrap([o],!0)};e.patch(r.children[0],l),a.push(l)}if(n.length>0){const l={type:"element",tagName:"tbody",properties:{},children:e.wrap(n,!0)},s=vP(r.children[1]),c=yP(r.children[r.children.length-1]);s&&c&&(l.position={start:s,end:c}),a.push(l)}const i={type:"element",tagName:"table",properties:{},children:e.wrap(a,!0)};return e.patch(r,i),e.applyData(r,i)}function y3e(e,r,n){const o=n?n.children:void 0,i=(o?o.indexOf(r):1)===0?"th":"td",l=n&&n.type==="table"?n.align:void 0,s=l?l.length:r.children.length;let c=-1;const d=[];for(;++c<s;){const p=r.children[c],f={},g=l?l[c]:void 0;g&&(f.align=g);let v={type:"element",tagName:i,properties:f,children:[]};p&&(v.children=e.all(p),e.patch(p,v),v=e.applyData(p,v)),d.push(v)}const u={type:"element",tagName:"tr",properties:{},children:e.wrap(d,!0)};return e.patch(r,u),e.applyData(r,u)}function v3e(e,r){const n={type:"element",tagName:"td",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}const eO=9,tO=32;function b3e(e){const r=String(e),n=/\r?\n|\r/g;let o=n.exec(r),a=0;const i=[];for(;o;)i.push(rO(r.slice(a,o.index),a>0,!0),o[0]),a=o.index+o[0].length,o=n.exec(r);return i.push(rO(r.slice(a),a>0,!1)),i.join("")}function rO(e,r,n){let o=0,a=e.length;if(r){let i=e.codePointAt(o);for(;i===eO||i===tO;)o++,i=e.codePointAt(o)}if(n){let i=e.codePointAt(a-1);for(;i===eO||i===tO;)a--,i=e.codePointAt(a-1)}return a>o?e.slice(o,a):""}function x3e(e,r){const n={type:"text",value:b3e(String(r.value))};return e.patch(r,n),e.applyData(r,n)}function w3e(e,r){const n={type:"element",tagName:"hr",properties:{},children:[]};return e.patch(r,n),e.applyData(r,n)}const k3e={blockquote:Kwe,break:Qwe,code:Jwe,delete:e3e,emphasis:t3e,footnoteReference:r3e,heading:n3e,html:o3e,imageReference:a3e,image:i3e,inlineCode:l3e,linkReference:s3e,link:c3e,listItem:d3e,list:p3e,paragraph:h3e,root:f3e,strong:m3e,table:g3e,tableCell:v3e,tableRow:y3e,text:x3e,thematicBreak:w3e,toml:Pb,yaml:Pb,definition:Pb,footnoteDefinition:Pb};function Pb(){}function _3e(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 S3e(e,r){return"Back to reference "+(e+1)+(r>1?"-"+r:"")}function E3e(e){const r=typeof e.options.clobberPrefix=="string"?e.options.clobberPrefix:"user-content-",n=e.options.footnoteBackContent||_3e,o=e.options.footnoteBackLabel||S3e,a=e.options.footnoteLabel||"Footnotes",i=e.options.footnoteLabelTagName||"h2",l=e.options.footnoteLabelProperties||{className:["sr-only"]},s=[];let c=-1;for(;++c<e.footnoteOrder.length;){const d=e.footnoteById.get(e.footnoteOrder[c]);if(!d)continue;const u=e.all(d),p=String(d.identifier).toUpperCase(),f=Fh(p.toLowerCase());let g=0;const v=[],w=e.footnoteCounts.get(p);for(;w!==void 0&&++g<=w;){v.length>0&&v.push({type:"text",value:" "});let C=typeof n=="string"?n
`},{type:"element",tagName:"ol",properties:{},children:e.wrap(s,!0)},{type:"text",value:`
`}]}}const C_={}.hasOwnProperty,C3e={};function $3e(e,r){const n=r||C3e,o=new Map,a=new Map,i=new Map,l={...k3e,...n.handlers},s={all:d,applyData:R3e,definitionById:o,footnoteById:a,footnoteCounts:i,footnoteOrder:[],handlers:l,one:c,options:n,patch:z3e,wrap:j3e};return m_(e,function(u){if(u.type==="definition"||u.type==="footnoteDefinition"){const p=u.type==="definition"?o:a,f=String(u.identifier).toUpperCase();p.has(f)||p.set(f,u)}}),s;function c(u,p){const f=u.type,g=s.handlers[f];if(C_.call(s.handlers,f)&&g)return g(s,u,p);if(s.options.passThrough&&s.options.passThrough.includes(f)){if("children"in u){const{children:w,...x}=u,k=Yg(x);return k.children=s.all(u),k}return Yg(u)}return(s.options.unknownHandler||T3e)(s,u,p)}function d(u){const p=[];if("children"in u){const f=u.children;let g=-1;for(;++g<f.length;){const v=s.one(f[g],u);if(v){if(g&&f[g-1].type==="break"&&(!Array.isArray(v)&&v.type==="text"&&(v.value=nO(v.value)),!Array.isArray(v)&&v.type==="element")){const w=v.children[0];w&&w.type==="text"&&(w.value=nO(w.value))}Array.isArray(v)?p.push(...v):p.push(v)}}}return p}}function z3e(e,r){e.position&&(r.position=xP(e))}function R3e(e,r){let n=r;if(e&&e.data){const o=e.data.hName,a=e.data.hChildren,i=e.data.hProperties;if(typeof o=="string")if(n.type==="element")n.tagName=o;else{const l="children"in n?n.children:[n];n={type:"element",tagName:o,properties:{},children:l}}n.type==="element"&&i&&Object.assign(n.properties,Yg(i)),"children"in n&&n.children&&a!==null&&a!==void 0&&(n.children=a)}return n}function T3e(e,r){const n=r.data||{},o="value"in r&&!(C_.call(n,"hProperties")||C_.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 j3e(e,r){const n=[];let o=-1;for(r&&n.push({type:"text",value:`
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
`});++o<e.length;)o&&n.push({type:"text",value:`
`}),n.push(e[o]);return r&&e.length>0&&n.push({type:"text",value:`
2025-12-16 12:13:34 +01:00
`}),n}function nO(e){let r=0,n=e.charCodeAt(r);for(;n===9||n===32;)r++,n=e.charCodeAt(r);return e.slice(r)}function oO(e,r){const n=$3e(e,r),o=n.one(e,void 0),a=E3e(n),i=Array.isArray(o)?{type:"root",children:o}:o||{type:"root",children:[]};return a&&i.children.push({type:"text",value:`
`},a),i}function A3e(e,r){return e&&"run"in e?async function(n,o){const a=oO(n,{file:o,...r});await e.run(a,o)}:function(n,o){return oO(n,{file:o,...e||r})}}function aO(e){if(e)throw e}var $_,iO;function D3e(){if(iO)return $_;iO=1;var e=Object.prototype.hasOwnProperty,r=Object.prototype.toString,n=Object.defineProperty,o=Object.getOwnPropertyDescriptor,a=function(d){return typeof Array.isArray=="function"?Array.isArray(d):r.call(d)==="[object Array]"},i=function(d){if(!d||r.call(d)!=="[object Object]")return!1;var u=e.call(d,"constructor"),p=d.constructor&&d.constructor.prototype&&e.call(d.constructor.prototype,"isPrototypeOf");if(d.constructor&&!u&&!p)return!1;var f;for(f in d);return typeof f>"u"||e.call(d,f)},l=function(d,u){n&&u.name==="__proto__"?n(d,u.name,{enumerable:!0,configurable:!0,value:u.newValue,writable:!0}):d[u.name]=u.newValue},s=function(d,u){if(u==="__proto__")if(e.call(d,u)){if(o)return o(d,u).value}else return;return d[u]};return $_=function c(){var d,u,p,f,g,v,w=arguments[0],x=1,k=arguments.length,C=!1;for(typeof w=="boolean"&&(C=w,w=arguments[1]||{},x=2),(w==null||typeof w!="object"&&typeof w!="function")&&(w={});x<k;++x)if(d=arguments[x],d!=null)for(u in d)p=s(w,u),f=s(d,u),w!==f&&(C&&f&&(i(f)||(g=a(f)))?(g?(g=!1,v=p&&a(p)?p:[]):v=p&&i(p)?p:{},l(w,{name:u,newValue:c(C,v,f)})):typeof f<"u"&&l(w,{name:u,newValue:f}));return w},$_}var N3e=D3e();const z_=Vg(N3e);function R_(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 M3e(){const e=[],r={run:n,use:o};return r;function n(...a){let i=-1;const l=a.pop();if(typeof l!="function")throw new TypeError("Expected function as last argument, not "+l);s(null,...a);function s(c,...d){const u=e[++i];let p=-1;if(c){l(c);return}for(;++p<a.length;)(d[p]===null||d[p]===void 0)&&(d[p]=a[p]);a=d,u?P3e(u,s)(...d):l(null,...d)}}function o(a){if(typeof a!="function")throw new TypeError("Expected `middelware` to be a function, not "+a);return e.push(a),r}}function P3e(e,r){let n;return o;function o(...l){const s=e.length>l.length;let c;s&&l.push(a);try{c=e.apply(this,l)}catch(d){const u=d;if(s&&n)throw u;return a(u)}s||(c&&c.then&&typeof c.then=="function"?c.then(i,a):c instanceof Error?a(c):i(c))}function a(l,...s){n||(n=!0,r(l,...s))}function i(l){a(null,l)}}class Qo extends Error{constructor(r,n,o){super(),typeof n=="string"&&(o=n,n=void 0);let a="",i={},l=!1;if(n&&("line"in n&&"column"in n?i={place:n}:"start"in n&&"end"in n?i={place:n}:"type"in n?i={ancestors:[n],place:n.position}:i={...n}),typeof r=="string"?a=r:!i.cause&&r&&(l=!0,a=r.message,i.cause=r),!i.ruleId&&!i.source&&typeof o=="string"){const c=o.indexOf(":");c===-1?i.ruleId=o:(i.source=o.slice(0,c),i.ruleId=o.slice(c+1))}if(!i.place&&i.ancestors&&i.ancestors){const c=i.ancestors[i.ancestors.length-1];c&&(i.place=c.position)}const s=i.place&&"start"in i.place?i.place.start:i.place;this.ancestors=i.ancestors||void 0,this.cause=i.cause||void 0,this.column=s?s.column:void 0,this.fatal=void 0,this.file,this.message=a,this.line=s?s.line:void 0,this.name=t1(i.place)||"1:1",this.place=i.place||void 0,this.reason=this.message,this.ruleId=i.ruleId||void 0,this.source=i.source||void 0,this.stack=l&&i.cause&&typeof i.cause.stack=="string"?i.cause.stack:"",this.actual,this.expected,this.note,this.url}}Qo.prototype.file="",Qo.prototype.name="",Qo.prototype.reason="",Qo.prototype.message="",Qo.prototype.stack="",Qo.prototype.column=void 0,Qo.prototype.line=void 0,Qo.prototype.ancestors=void 0,Qo.prototype.cause=void 0,Qo.prototype.fatal=void 0,Qo.prototype.place=void 0,Qo.prototype.ruleId=void 0,Qo.prototype.source=void 0;const Vl={basename:B3e,dirname:O3e,extname:I3e,join:L3e,sep:"/"};function B3e(e,r){if(r!==void 0&&typeof r!="string")throw new TypeError('"ext" argument must be a string');r1(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 Ka(this.target,this.source);const[n]=m8(this.target,this.source,"directed");return n??new Ka(this.target,this.source,new Set)}}function D4e(e){if(e==null||e==="")return!0;if(typeof e!="object")return!1;if("length"in e&&typeof e.length=="number")return e.length===0;if("size"in e&&typeof e.size=="number")return e.size===0;for(let r in e)return!1;return Object.getOwnPropertySymbols(e).length===0}function N4e(...e){return io(M4e,e)}const M4e=e=>e.at(-1);function nI(e,r,n){return typeof r=="number"||r===void 0?o=>o.split(e,r):e.split(r,n)}function Zb(...e){return io(Object.values,e)}class Kb{constructor(r,n){this.$model=r,this.$element=n,this.id=this.$element.id,this._literalId=this.$element.id;const[o,a]=l4e(this.id);o?(this.imported={from:o,fqn:a},this.hierarchyLevel=vb(a)):(this.imported=null,this.hierarchyLevel=vb(this.id))}Aux;id;_literalId;hierarchyLevel;imported;get name(){return qg(this.id)}get parent(){return this.$model.parent(this)}get kind(){return this.$element.kind}get shape(){return this.style.shape}get color(){return this.style.color}get icon(){return this.style.icon??null}get tags(){return ir(this,Symbol.for("tags"),()=>Ib([...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&&!f8(this.$element.summary,this.$element.description)}get summary(){return ur.memoize(this,"summary",Os(this.$element))}get description(){return ur.memoize(this,"description",Wh(this.$element))}get technology(){return this.$element.technology??null}get links(){return this.$element.links??[]}get defaultView(){return ir(this,Symbol.for("defaultView"),()=>a1(this.scopedViews())??null)}get isRoot(){return this.parent===null}get style(){return ir(this,"style",()=>p1({shape:this.$model.$styles.defaults.shape,color:this.$model.$styles.defaults.color,border:this.$model.$styles.defaults.border,opacity:this.$model.$styles.defaults.opacity,size:this.$model.$styles.defaults.size,padding:this.$model.$styles.defaults.padding,textSize:this.$model.$styles.defaults.text,...this.$element.style}))}isAncestorOf(r){return Yn(this,r)}isDescendantOf(r){return Yn(r,this)}ancestors(){return this.$model.ancestors(this)}commonAncestor(r){const n=Ug(this.id,r.id);return n?this.$model.element(n):null}children(){return this.$model.children(this)}descendants(r){return r?iP([...this.$model.descendants(this)],r)[Symbol.iterator]():this.$model.descendants(this)}siblings(){return this.$model.siblings(this)}*ascendingSiblings(){yield*this.siblings();for(const r of this.ancestors())yield*r.siblings()}*descendingSiblings(){for(const r of[...this.ancestors()].reverse())yield*r.siblings();yield*this.siblings()}incoming(r="all"){return this.$model.incoming(this,r)}*incomers(r="all"){const n=new Set;for(const o of this.incoming(r))n.has(o.source.id)||(n.add(o.source.id),yield o.source)}outgoing(r="all"){return this.$model.outgoing(this,r)}*outgoers(r="all"){const n=new Set;for(const o of this.outgoing(r))n.has(o.target.id)||(n.add(o.target.id),yield o.target)}get allOutgoing(){return ir(this,Symbol.for("allOutgoing"),()=>new Set(this.outgoing()))}get allIncoming(){return ir(this,Symbol.for("allIncoming"),()=>new Set(this.incoming()))}views(){return ir(this,Symbol.for("views"),()=>{const r=new Set;for(const n of this.$model.views())n.includesElement(this.id)&&r.add(n);return r})}scopedViews(){return ir(this,Symbol.for("scopedViews"),()=>{const r=new Set;for(const n of this.$model.views())n.isScopedElementView()&&n.viewOf.id===this.id&&r.add(n);return r})}isDeployed(){return Za(a1(this.deployments()))}deployments(){return this.$model.deployment.instancesOf(this)}hasMetadata(){return!!this.$element.metadata&&!g1(this.$element.metadata)}getMetadata(r){return r?this.$element.metadata?.[r]:this.$element.metadata??{}}isTagged(r){return this.tags.includes(r)}}const yr=e=>typeof e=="string"?e:e.id,xa="/",g8=e=>{if(He(!e.includes(`
`),"View title cannot contain newlines"),e.includes(xa)){const r=e.split(xa).map(n=>n.trim()).filter(n=>n.length>0);return Il(r,1)?r:[""]}return[e.trim()]},Qb=e=>g8(e).join(xa),P4e=e=>{const r=g8(e);return Il(r,2)?r.slice(0,-1).join(xa):null},y8=e=>e.includes(xa)?g8(e).pop()??e:e.trim();class B4e{constructor(r){this.$model=r;const n=this.$deployments=r.$data.deployments,o=Zb(n.elements);for(const a of Wc(o)){const i=this.addElement(a);for(const l of i.tags)this.#c.get(l).add(i);i.isInstance()&&this.#r.get(i.element.id).add(i)}for(const a of Zb(n.relations)){const i=this.addRelation(a);for(const l of i.tags)this.#c.get(l).add(i)}}#e=new Map;#i=new Map;#t=new Ln(()=>new Set);#r=new Ln(()=>new Set);#l=new Set;#n=new Map;#s=new Ln(()=>new Set);#a=new Ln(()=>new Set);#o=new Ln(()=>new Set);#c=new Ln(()=>new Set);#d=new Map;$deployments;get $styles(){return this.$model.$styles}element(r){if(r instanceof JO||r instanceof eI)return r;const n=yr(r);return mt(this.#e.get(n),`Element ${n} not found`)}findElement(r){return this.#e.get(r)??null}node(r){const n=this.element(r);return He(n.isDeploymentNode(),`Element ${n.id} is not a deployment node`),n}findNode(r){const n=this.findElement(r);return n?(He(n.isDeploymentNode(),`Element ${n?.id} is not a deployment node`),n):null}instance(r){const n=this.element(r);return He(n.isInstance(),`Element ${n.id} is not a deployed instance`),n}findInstance(r){const n=this.findElement(r);return n?(He(n.isInstance(),`Element ${n?.id} is not a deployed instance`),n):null}roots(){return this.#l.values()}elements(){return this.#e.values()}*nodes(){for(const r of this.#e.values())r.isDeploymentNode()&&(yield r)}*nodesOfKind(r){for(const n of this.#e.values())n.isDeploymentNode()&&n.kind===r&&(yield n)}*instances(){for(const r of this.#e.values())r.isInstance()&&(yield r)}*instancesOf(r){const n=yr(r),o=this.#r.get(n);o&&(yield*o)}deploymentRef(r){if(h1.isInsideInstanceRef(r)){const{deployment:n,element:o}=r;return y4e(this.#d,`${n}@${o}`,()=>new R4e(this.instance(n),this.$model.element(o)))}return this.element(r.deployment)}relationships(){return this.#n.values()}relationship(r){return mt(this.#n.get(yr(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=yr(r);return this.#i.get(n)||null}children(r){const n=yr(r);return this.#t.get(n)}*siblings(r){const n=yr(r),o=this.parent(r)?.children()??this.roots();for(const a of o)a.id!==n&&(yield a)}*ancestors(r){let n=yr(r),o;for(;o=this.#i.get(n);)yield o,n=o.id}*descendants(r,n="desc"){for(const o of this.children(r))n==="asc"?(yield o,yield*this.descendants(o.id)):(yield*this.descendants(o.id),yield o)}*incoming(r,n="all"){const o=yr(r);for(const a of this.#s.get(o))switch(!0){case n==="all":case(n==="direct"&&a.target.id===o):case(n==="to-descendants"&&a.target.id!==o):yield a;break}}*outgoing(r,n="all"){const o=yr(r);for(const a of this.#a.get(o))switch(!0){case n==="all":case(n==="direct"&&a.source.id===o):case(n==="from-descendants"&&a.source.id!==o):yield a;break}}addElement(r){if(this.#e.has(r.id))throw new Error(`Element ${r.id} already exists`);const n=p2e(r)?new JO(this,Object.freeze(r)):new eI(this,Object.freeze(r),this.$model.element(r.element));this.#e.set(n.id,n);const o=yb(n.id);return o?(He(this.#e.has(o),`Parent ${o} of ${n.id} not found`),this.#i.set(n.id,this.node(o)),this.#t.get(o).add(n)):(He(n.isDeploymentNode(),`Root element ${n.id} is not a deployment node`),this.#l.add(n)),n}addRelation(r){if(this.#n.has(r.id))throw new Error(`Relation ${r.id} already exists`);const n=new T4e(this,Object.freeze(r));this.#n.set(n.id,n),this.#s.get(n.target.id).add(n),this.#a.get(n.source.id).add(n);const o=n.boundary?.id??null;if(o)for(const a of[o,...ku(o)])this.#o.get(a).add(n);for(const a of ku(n.source.id)){if(a===o)break;this.#a.get(a).add(n)}for(const a of ku(n.target.id)){if(a===o)break;this.#s.get(a).add(n)}return n}}class oI{constructor(r,n){this.model=r,this.$relationship=n,this.source=r.element(h1.flatten
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
`).replace(`
`,`
+`).split(`
`)),d=c.reduce((u,p)=>u.concat(...p),[]);return[c,d]}return[[],[]]},[e]);return S.useEffect(()=>{const c=r?.target??zF,d=r?.actInsideInputWithModifier??!0;if(e!==null){const u=g=>{if(a.current=g.ctrlKey||g.metaKey||g.shiftKey||g.altKey,(!a.current||a.current&&!d)&&ML(g))return!1;const v=TF(g.code,s);if(i.current.add(g[v]),RF(l,i.current,!1)){const w=g.composedPath?.()?.[0]||g.target,x=w?.nodeName==="BUTTON"||w?.nodeName==="A";r.preventDefault!==!1&&(a.current||!x)&&g.preventDefault(),o(!0)}},p=g=>{const v=TF(g.code,s);RF(l,i.current,!0)?(o(!1),i.current.clear()):i.current.delete(g[v]),g.key==="Meta"&&i.current.clear(),a.current=!1},f=()=>{i.current.clear(),o(!1)};return c?.addEventListener("keydown",u),c?.addEventListener("keyup",p),window.addEventListener("blur",f),window.addEventListener("contextmenu",f),()=>{c?.removeEventListener("keydown",u),c?.removeEventListener("keyup",p),window.removeEventListener("blur",f),window.removeEventListener("contextmenu",f)}}},[e,o]),n}function RF(e,r,n){return e.filter(o=>n||o.length===r.size).some(o=>o.every(a=>r.has(a)))}function TF(e,r){return r.includes(e)?"code":"key"}const Q7e=()=>{const e=vr();return S.useMemo(()=>({zoomIn:r=>{const{panZoom:n}=e.getState();return n?n.scaleBy(1.2,{duration:r?.duration}):Promise.resolve(!1)},zoomOut:r=>{const{panZoom:n}=e.getState();return n?n.scaleBy(1/1.2,{duration:r?.duration}):Promise.resolve(!1)},zoomTo:(r,n)=>{const{panZoom:o}=e.getState();return o?o.scaleTo(r,{duration:n?.duration}):Promise.resolve(!1)},getZoom:()=>e.getState().transform[2],setViewport:async(r,n)=>{const{transform:[o,a,i],panZoom:l}=e.getState();return l?(await l.setViewport({x:r.x??o,y:r.y??a,zoom:r.zoom??i},n),Promise.resolve(!0)):Promise.resolve(!1)},getViewport:()=>{const[r,n,o]=e.getState().transform;return{x:r,y:n,zoom:o}},setCenter:async(r,n,o)=>e.getState().setCenter(r,n,o),fitBounds:async(r,n)=>{const{width:o,height:a,minZoom:i,maxZoom:l,panZoom:s}=e.getState(),c=qs(r,o,a,i,l,n?.padding??.1);return s?(await s.setViewport(c,{duration:n?.duration,ease:n?.ease,interpolate:n?.interpolate}),Promise.resolve(!0)):Promise.resolve(!1)},screenToFlowPosition:(r,n={})=>{const{transform:o,snapGrid:a,snapToGrid:i,domNode:l}=e.getState();if(!l)return r;const{x:s,y:c}=l.getBoundingClientRect(),d={x:r.x-s,y:r.y-c},u=n.snapGrid??a,p=n.snapToGrid??i;return P1(d,o,p,u)},flowToScreenPosition:r=>{const{transform:n,domNode:o}=e.getState();if(!o)return r;const{x:a,y:i}=o.getBoundingClientRect(),l=Tx(r,n);return{x:l.x+a,y:l.y+i}}}),[])};function jF(e,r){const n=[],o=new Map,a=[];for(const i of e)if(i.type==="add"){a.push(i);continue}else if(i.type==="remove"||i.type==="replace")o.set(i.id,[i]);else{const l=o.get(i.id);l?l.push(i):o.set(i.id,[i])}for(const i of r){const l=o.get(i.id);if(!l){n.push(i);continue}if(l[0].type==="remove")continue;if(l[0].type==="replace"){n.push({...l[0].item});continue}const s={...i};for(const c of l)J7e(c,s);n.push(s)}return a.length&&a.forEach(i=>{i.index!==void 0?n.splice(i.index,0,{...i.item}):n.push({...i.item})}),n}function J7e(e,r){switch(e.type){case"select":{r.selected=e.selected;break}case"position":{typeof e.position<"u"&&(r.position=e.position),typeof e.dragging<"u"&&(r.dragging=e.dragging);break}case"dimensions":{typeof e.dimensions<"u"&&(r.measured={...e.dimensions},e.setAttributes&&((e.setAttributes===!0||e.setAttributes==="width")&&(r.width=e.dimensions.width),(e.setAttributes===!0||e.setAttributes==="height")&&(r.height=e.dimensions.height))),typeof e.resizing=="boolean"&&(r.resizing=e.resizing);break}}}function Ox(e,r){return jF(e,r)}function Ix(e,r){return jF(e,r)}function Hu(e,r){return{id:e,type:"select",selected:r}}function sf(e,r=new Set,n=!1){const o=[];for(const[a,i]of e){const l=r.has(a);!(i.selected===void 0&&!l)&&i.selected!==l&&(n&&(i.selected=l),o.push(Hu(i.id,l)))}return o}function AF({items:e=[],lookup:r}){const n=[],o=new Map(e.map(a=>[a.id,a]));for(const[a,i]of e.entries()){const l=r.get(i.id),s=l?.internals?.userNode??l;s!==void 0&&s!==i&&n.push({id:i.id,item:i,type:"replace"}),s===void 0&&n.push({item:i,type:"add",index:a})
M${R.x},${R.y}h${R.width}v${R.height}h${-R.width}z`,fillRule:"evenodd",pointerEvents:"none"})]})})}xV.displayName="MiniMap",S.memo(xV);const qSe=e=>r=>e?`${Math.max(1/r.transform[2],1)}`:void 0,HSe={[lf.Line]:"right",[lf.Handle]:"bottom-right"};function USe({nodeId:e,position:r,variant:n=lf.Handle,className:o,style:a=void 0,children:i,color:l,minWidth:s=10,minHeight:c=10,maxWidth:d=Number.MAX_VALUE,maxHeight:u=Number.MAX_VALUE,keepAspectRatio:p=!1,resizeDirection:f,autoScale:g=!0,shouldResize:v,onResizeStart:w,onResize:x,onResizeEnd:k}){const C=f7(),_=typeof e=="string"?e:C,$=vr(),z=S.useRef(null),T=n===lf.Handle,A=Dt(S.useCallback(qSe(T&&g),[T,g]),jr),R=S.useRef(null),j=r??HSe[n];S.useEffect(()=>{if(!(!z.current||!_))return R.current||(R.current=_7e({domNode:z.current,nodeId:_,getStoreItems:()=>{const{nodeLookup:P,transform:L,snapGrid:H,snapToGrid:N,nodeOrigin:V,domNode:B}=$.getState();return{nodeLookup:P,transform:L,snapGrid:H,snapToGrid:N,nodeOrigin:V,paneDomNode:B}},onChange:(P,L)=>{const{triggerNodeChanges:H,nodeLookup:N,parentLookup:V,nodeOrigin:B}=$.getState(),F=[],q={x:P.x,y:P.y},G=N.get(_);if(G&&G.expandParent&&G.parentId){const U=G.origin??B,Y=P.width??G.measured.width??0,Z=P.height??G.measured.height??0,I={id:G.id,parentId:G.parentId,rect:{width:Y,height:Z,...AL({x:P.x??G.position.x,y:P.y??G.position.y},{width:Y,height:Z},G.parentId,N,U)}},W=n7([I],N,V,B);F.push(...W),q.x=P.x?Math.max(U[0]*Y,P.x):void 0,q.y=P.y?Math.max(U[1]*Z,P.y):void 0}if(q.x!==void 0&&q.y!==void 0){const U={id:_,type:"position",position:{...q}};F.push(U)}if(P.width!==void 0&&P.height!==void 0){const U={id:_,type:"dimensions",resizing:!0,setAttributes:f?f==="horizontal"?"width":"height":!0,dimensions:{width:P.width,height:P.height}};F.push(U)}for(const U of L){const Y={...U,type:"position"};F.push(Y)}H(F)},onEnd:({width:P,height:L})=>{const H={id:_,type:"dimensions",resizing:!1,dimensions:{width:P,height:L}};$.getState().triggerNodeChanges([H])}})),R.current.update({controlPosition:j,boundaries:{minWidth:s,minHeight:c,maxWidth:d,maxHeight:u},keepAspectRatio:p,resizeDirection:f,onResizeStart:w,onResize:x,onResizeEnd:k,shouldResize:v}),()=>{R.current?.destroy()}},[j,s,c,d,u,p,w,x,k,v]);const O=j.split("-");return y.jsx("div",{className:dn(["react-flow__resize-control","nodrag",...O,n,o]),ref:z,style:{...a,scale:A,...l&&{[T?"backgroundColor":"borderColor"]:l}},children:i})}S.memo(USe);const WSe=e=>e.domNode?.querySelector(".react-flow__renderer");function GSe({children:e}){const r=Dt(WSe);return r?Ii.createPortal(e,r):null}const YSe=(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,XSe=(e,r)=>{if(e.size!==r.size)return!1;for(const[n,o]of e)if(YSe(o,r.get(n)))return!1;return!0},ZSe=e=>({x:e.transform[0],y:e.transform[1],zoom:e.transform[2],selectedNodesCount:e.nodes.filter(r=>r.selected).length});function g7({nodeId:e,children:r,className:n,style:o,isVisible:a,position:i=Ue.Top,offset:l=10,align:s="center",...c}){const d=f7(),u=S.useCallback($=>(Array.isArray(e)?e:[e||d||""]).reduce((z,T)=>{const A=$.nodeLookup.get(T);return A&&z.set(A.id,A),z},new Map),[e,d]),p=Dt(u,XSe),{x:f,y:g,zoom:v,selectedNodesCount:w}=Dt(ZSe,jr);if(!(typeof a=="boolean"?a:p.size===1&&p.values().next().value?.selected&&w===1)||!p.size)return null;const x=ef(p),k=Array.from(p.values()),C=Math.max(...k.map($=>$.internals.z+1)),_={position:"absolute",transform:W8e(x,{x:f,y:g,zoom:v},i,l,s),zIndex:C,...o};return y.jsx(GSe,{children:y.jsx("div",{style:_,className:dn(["react-flow__node-toolbar",n]),...c,"data-id":k.reduce(($,z)=>`${$}${z.id} `,"").trim(),children:r})})}var KSe=Object.getOwnPropertyNames,QSe=Object.getOwnPropertySymbols,JSe=Object.prototype.hasOwnProperty;function wV(e,r){return function(n,o,a){return e(n,o,a)&&r(n,o,a)}}function Ux(e){return function(r,n,o){if(!r||!n||typeof r!="object"||typeof n!="object")return e(r,n,o);var
2025-12-16 12:13:34 +01:00
.`.concat(FCe,` {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
overflow: hidden `).concat(o,`;
2025-12-16 12:13:34 +01:00
padding-right: `).concat(s,"px ").concat(o,`;
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
}
2025-12-16 12:13:34 +01:00
body[`).concat(uf,`] {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
overflow: hidden `).concat(o,`;
overscroll-behavior: contain;
`).concat([r&&"position: relative ".concat(o,";"),n==="margin"&&`
padding-left: `.concat(a,`px;
padding-top: `).concat(i,`px;
2025-12-16 12:13:34 +01:00
padding-right: `).concat(l,`px;
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
margin-left:0;
margin-top:0;
2025-12-16 12:13:34 +01:00
margin-right: `).concat(s,"px ").concat(o,`;
`),n==="padding"&&"padding-right: ".concat(s,"px ").concat(o,";")].filter(Boolean).join(""),`
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
}
2025-12-16 12:13:34 +01:00
.`).concat(ew,` {
right: `).concat(s,"px ").concat(o,`;
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
}
2025-12-16 12:13:34 +01:00
.`).concat(tw,` {
margin-right: `).concat(s,"px ").concat(o,`;
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
}
2025-12-16 12:13:34 +01:00
.`).concat(ew," .").concat(ew,` {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
right: 0 `).concat(o,`;
}
2025-12-16 12:13:34 +01:00
.`).concat(tw," .").concat(tw,` {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
margin-right: 0 `).concat(o,`;
}
2025-12-16 12:13:34 +01:00
body[`).concat(uf,`] {
`).concat(VCe,": ").concat(s,`px;
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
}
2025-12-16 12:13:34 +01:00
`)},eq=function(){var e=parseInt(document.body.getAttribute(uf)||"0",10);return isFinite(e)?e:0},l$e=function(){S.useEffect(function(){return document.body.setAttribute(uf,(eq()+1).toString()),function(){var e=eq()-1;e<=0?document.body.removeAttribute(uf):document.body.setAttribute(uf,e.toString())}},[])},s$e=function(e){var r=e.noRelative,n=e.noImportant,o=e.gapMode,a=o===void 0?"margin":o;l$e();var i=S.useMemo(function(){return o$e(a)},[a]);return S.createElement(a$e,{styles:i$e(i,!r,a,n?"":"!important")})},S7=!1;if(typeof window<"u")try{var nw=Object.defineProperty({},"passive",{get:function(){return S7=!0,!0}});window.addEventListener("test",nw,nw),window.removeEventListener("test",nw,nw)}catch{S7=!1}var pf=S7?{passive:!1}:!1,c$e=function(e){return e.tagName==="TEXTAREA"},tq=function(e,r){if(!(e instanceof Element))return!1;var n=window.getComputedStyle(e);return n[r]!=="hidden"&&!(n.overflowY===n.overflowX&&!c$e(e)&&n[r]==="visible")},d$e=function(e){return tq(e,"overflowY")},u$e=function(e){return tq(e,"overflowX")},rq=function(e,r){var n=r.ownerDocument,o=r;do{typeof ShadowRoot<"u"&&o instanceof ShadowRoot&&(o=o.host);var a=nq(e,o);if(a){var i=oq(e,o),l=i[1],s=i[2];if(l>s)return!0}o=o.parentNode}while(o&&o!==n.body);return!1},p$e=function(e){var r=e.scrollTop,n=e.scrollHeight,o=e.clientHeight;return[r,n,o]},h$e=function(e){var r=e.scrollLeft,n=e.scrollWidth,o=e.clientWidth;return[r,n,o]},nq=function(e,r){return e==="v"?d$e(r):u$e(r)},oq=function(e,r){return e==="v"?p$e(r):h$e(r)},f$e=function(e,r){return e==="h"&&r==="rtl"?-1:1},m$e=function(e,r,n,o,a){var i=f$e(e,window.getComputedStyle(r).direction),l=i*o,s=n.target,c=r.contains(s),d=!1,u=l>0,p=0,f=0;do{if(!s)break;var g=oq(e,s),v=g[0],w=g[1],x=g[2],k=w-x-i*v;(v||k)&&nq(e,s)&&(p+=k,f+=v);var C=s.parentNode;s=C&&C.nodeType===Node.DOCUMENT_FRAGMENT_NODE?C.host:C}while(!c&&s!==document.body||c&&(r.contains(s)||r===s));return(u&&Math.abs(p)<1||!u&&Math.abs(f)<1)&&(d=!0),d},ow=function(e){return"changedTouches"in e?[e.changedTouches[0].clientX,e.changedTouches[0].clientY]:[0,0]},aq=function(e){return[e.deltaX,e.deltaY]},iq=function(e){return e&&"current"in e?e.current:e},g$e=function(e,r){return e[0]===r[0]&&e[1]===r[1]},y$e=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;}
`)},v$e=0,hf=[];function b$e(e){var r=S.useRef([]),n=S.useRef([0,0]),o=S.useRef(),a=S.useState(v$e++)[0],i=S.useState(JV)[0],l=S.useRef(e);S.useEffect(function(){l.current=e},[e]),S.useEffect(function(){if(e.inert){document.body.classList.add("block-interactivity-".concat(a));var w=LCe([e.lockRef.current],(e.shards||[]).map(iq)).filter(Boolean);return w.forEach(function(x){return x.classList.add("allow-interactivity-".concat(a))}),function(){document.body.classList.remove("block-interactivity-".concat(a)),w.forEach(function(x){return x.classList.remove("allow-interactivity-".concat(a))})}}},[e.inert,e.lockRef.current,e.shards]);var s=S.useCallback(function(w,x){if("touches"in w&&w.touches.length===2||w.type==="wheel"&&w.ctrlKey)return!l.current.allowPinchZoom;var k=ow(w),C=n.current,_="deltaX"in w?w.deltaX:C[0]-k[0],$="deltaY"in w?w.deltaY:C[1]-k[1],z,T=w.target,A=Math.abs(_)>Math.abs($)?"h":"v";if("touches"in w&&A==="h"&&T.type==="range")return!1;var R=rq(A,T);if(!R)return!0;if(R?z=A:(z=A==="v"?"h":"v",R=rq(A,T)),!R)return!1;if(!o.current&&"changedTouches"in w&&(_||$)&&(o.current=z),!z)return!0;var j=o.current||z;return m$e(j,x,w,j==="h"?_:$)},[]),c=S.useCallback(function(w){var x=w;if(!(!hf.length||hf[hf.length-1]!==i)){var k="deltaY"in x?aq(x):ow(x),C=r.current.filter(function(z){return z.name===x.type&&(z.target===x.target||x.target===z.shadowParent)&&g$e(z.delta,k)})[0];if(C&&C.should){x.cancelable&&x.preventDefault();return}if(!C){var _=(l.current.shards||[]).map(iq).filter(Boolean).filter(function(z){return z.contains(x.target)}),$=_.length>0?s(x,_[0]):!l.current.noIsolation;$&&x.cancelable&&x.preventDefault()}}},[]),d=S.useCallback(function(w,x,k,C){var _={name:w,delta:x,target:k,should:C,shadowParent:x$e(k)};r.current.push(_),setTimeout(function(){r.current=r.current.filter(function($){return $!==_})},1)},[]),u=S.useCallback(function(w){n.current=ow(w),o.current=void 0},[]),p=S.useCallback(function(w){d(w.type,aq(w),w.target,s(w,e.lockRef.current))},[]),f=S.useCallback(function(w){d(w.type,ow(w),w.target,s(w,e.lockRef.current))},[]);S.useEffect(function(){return hf.push(i),e.setCallbacks({onScrollCapture:p,onWheelCapture:p,onTouchMoveCapture:f}),document.addEventListener("wheel",c,pf),document.addEventListener("touchmove",c,pf),document.addEventListener("touchstart",u,pf),function(){hf=hf.filter(function(w){return w!==i}),document.removeEventListener("wheel",c,pf),document.removeEventListener("touchmove",c,pf),document.removeEventListener("touchstart",u,pf)}},[]);var g=e.removeScrollBar,v=e.inert;return S.createElement(S.Fragment,null,v?S.createElement(i,{styles:y$e(a)}):null,g?S.createElement(s$e,{noRelative:e.noRelative,gapMode:e.gapMode}):null)}function x$e(e){for(var r=null;e!==null;)e instanceof ShadowRoot&&(r=e.host,e=e.host),e=e.parentNode;return r}const w$e=XCe(QV,b$e);var W1=S.forwardRef(function(e,r){return S.createElement(rw,Gl({},e,{ref:r,sideCar:w$e}))});W1.classNames=rw.classNames;function So(e){return Object.keys(e)}function E7(e){return e&&typeof e=="object"&&!Array.isArray(e)}function C7(e,r){const n={...e},o=r;return E7(e)&&E7(r)&&Object.keys(r).forEach(a=>{E7(o[a])&&a in e?n[a]=C7(n[a],o[a]):n[a]=o[a]}),n}function k$e(e){return e.replace(/[A-Z]/g,r=>`-${r.toLowerCase()}`)}function _$e(e){return typeof e!="string"||!e.includes("var(--mantine-scale)")?e:e.match(/^calc\((.*?)\)$/)?.[1].split("*")[0].trim()}function $7(e){const r=_$e(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 lq(e){return e==="0rem"?"0rem":`calc(${e} * var(--mantine-scale))`}function sq(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?lq(a):a}if(typeof o=="string"){if(o===""||o.startsWith("calc(")||o.startsWith("clamp(")||o.includes("rgba("))return o;if(o.includes(","))return o.split(",").map(i=>n(i)).join(",");if(o.includes(" "))return o.split(" ")
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
2025-12-16 12:13:34 +01:00
${l}
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
2025-12-16 12:13:34 +01:00
${s}`}function F7({color:e,theme:r,autoContrast:n}){return(typeof n=="boolean"?n:r.autoContrast)&&cd({color:e||r.primaryColor,theme:r}).isLight?"var(--mantine-color-black)":"var(--mantine-color-white)"}function Iq(e,r){return F7({color:e.colors[e.primaryColor][K1(e,r)],theme:e,autoContrast:null})}function mw({theme:e,color:r,colorScheme:n,name:o=r,withColorValues:a=!0}){if(!e.colors[r])return{};if(n==="light"){const s=K1(e,"light"),c={[`--mantine-color-${o}-text`]:`var(--mantine-color-${o}-filled)`,[`--mantine-color-${o}-filled`]:`var(--mantine-color-${o}-${s})`,[`--mantine-color-${o}-filled-hover`]:`var(--mantine-color-${o}-${s===9?8:s+1})`,[`--mantine-color-${o}-light`]:vf(e.colors[r][s],.1),[`--mantine-color-${o}-light-hover`]:vf(e.colors[r][s],.12),[`--mantine-color-${o}-light-color`]:`var(--mantine-color-${o}-${s})`,[`--mantine-color-${o}-outline`]:`var(--mantine-color-${o}-${s})`,[`--mantine-color-${o}-outline-hover`]:vf(e.colors[r][s],.05)};return a?{[`--mantine-color-${o}-0`]:e.colors[r][0],[`--mantine-color-${o}-1`]:e.colors[r][1],[`--mantine-color-${o}-2`]:e.colors[r][2],[`--mantine-color-${o}-3`]:e.colors[r][3],[`--mantine-color-${o}-4`]:e.colors[r][4],[`--mantine-color-${o}-5`]:e.colors[r][5],[`--mantine-color-${o}-6`]:e.colors[r][6],[`--mantine-color-${o}-7`]:e.colors[r][7],[`--mantine-color-${o}-8`]:e.colors[r][8],[`--mantine-color-${o}-9`]:e.colors[r][9],...c}:c}const i=K1(e,"dark"),l={[`--mantine-color-${o}-text`]:`var(--mantine-color-${o}-4)`,[`--mantine-color-${o}-filled`]:`var(--mantine-color-${o}-${i})`,[`--mantine-color-${o}-filled-hover`]:`var(--mantine-color-${o}-${i===9?8:i+1})`,[`--mantine-color-${o}-light`]:vf(e.colors[r][Math.max(0,i-2)],.15),[`--mantine-color-${o}-light-hover`]:vf(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`]:vf(e.colors[r][Math.max(i-4,0)],.05)};return a?{[`--mantine-color-${o}-0`]:e.colors[r][0],[`--mantine-color-${o}-1`]:e.colors[r][1],[`--mantine-color-${o}-2`]:e.colors[r][2],[`--mantine-color-${o}-3`]:e.colors[r][3],[`--mantine-color-${o}-4`]:e.colors[r][4],[`--mantine-color-${o}-5`]:e.colors[r][5],[`--mantine-color-${o}-6`]:e.colors[r][6],[`--mantine-color-${o}-7`]:e.colors[r][7],[`--mantine-color-${o}-8`]:e.colors[r][8],[`--mantine-color-${o}-9`]:e.colors[r][9],...l}:l}function Pze(e){return!!e&&typeof e=="object"&&"mantine-virtual-color"in e}function bf(e,r,n){So(r).forEach(o=>Object.assign(e,{[`--mantine-${n}-${o}`]:r[o]}))}const Lq=e=>{const r=K1(e,"light"),n=e.defaultRadius in e.radius?e.radius[e.defaultRadius]:$e(e.defaultRadius),o={variables:{"--mantine-z-index-app":"100","--mantine-z-index-modal":"200","--mantine-z-index-popover":"300","--mantine-z-index-overlay":"400","--mantine-z-index-max":"9999","--mantine-scale":e.scale.toString(),"--mantine-cursor-type":e.cursorType,"--mantine-webkit-font-smoothing":e.fontSmoothing?"antialiased":"unset","--mantine-moz-font-smoothing":e.fontSmoothing?"grayscale":"unset","--mantine-color-white":e.white,"--mantine-color-black":e.black,"--mantine-line-height":e.lineHeights.md,"--mantine-font-family":e.fontFamily,"--mantine-font-family-monospace":e.fontFamilyMonospace,"--mantine-font-family-headings":e.headings.fontFamily,"--mantine-heading-font-weight":e.headings.fontWeight,"--mantine-heading-text-wrap":e.headings.textWrap,"--mantine-radius-default":n,"--mantine-primary-color-filled":`var(--mantine-color-${e.primaryColor}-filled)`,"--mantine-primary-color-filled-hover":`var(--mantine-color-${e.primaryColor}-filled-hover)`,"--mantine-primary-color-light":`var(--mantine-color-${e.primaryColor}-light)`,"--mantine-primary-color-light-hover":`var(--mantine-color-${e.primaryColor}-light-hover)`,"--mantine-primary-color-light-color":`var(--mantine-color-${e.primaryColor}-light-color)`},light:{"--mantine-color-scheme":"light","--mantine-primary-color-contrast":Iq(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 Fq({cssVariablesSelector:e,deduplicateCssVariables:r}){const n=lo(),o=Zu(),a=gze(),i=Bze({theme:n,generator:a}),l=e===":root"&&r,s=l?Oze(i):i,c=Mze(s,e);return c?y.jsx("style",{"data-mantine-styles":!0,nonce:o?.(),dangerouslySetInnerHTML:{__html:`${c}${l?"":Ize(e)}`}}):null}Fq.displayName="@mantine/CssVariables";function xf(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 Lze({manager:e,defaultColorScheme:r,getRootElement:n,forceColorScheme:o}){const a=S.useRef(null),[i,l]=S.useState(()=>e.get(r)),s=o||i,c=S.useCallback(u=>{o||(xf(u,n),l(u),e.set(u))},[e.set,s,o]),d=S.useCallback(()=>{l(r),xf(r,n),e.clear()},[e.clear,r]);return S.useEffect(()=>(e.subscribe(c),e.unsubscribe),[e.subscribe,e.unsubscribe]),Z1(()=>{xf(e.get(r),n)},[]),S.useEffect(()=>{if(o)return xf(o,n),()=>{};o===void 0&&xf(i,n),typeof window<"u"&&"matchMedia"in window&&(a.current=window.matchMedia("(prefers-color-scheme: dark)"));const u=p=>{i==="auto"&&xf(p.matches?"dark":"light",n)};return a.current?.addEventListener("change",u),()=>a.current?.removeEventListener("change",u)},[i,o]),{colorScheme:s,setColorScheme:c,clearColorScheme:d}}function Fze({respectReducedMotion:e,getRootElement:r}){Z1(()=>{e&&r()?.setAttribute("data-respect-reduced-motion","true")},[e])}function q7({theme:e,children:r,getStyleNonce:n,withStaticClasses:o=!0,withGlobalClasses:a=!0,deduplicateCssVariables:i=!0,withCssVariables:l=!0,cssVariablesSelector:s=":root",classNamesPrefix:c="mantine",colorSchemeManager:d=Tze(),defaultColorScheme:u="light",getRootElement:p=()=>document.documentElement,cssVariablesResolver:f,forceColorScheme:g,stylesTransform:v,env:w}){const{colorScheme:x,setColorScheme:k,clearColorScheme:C}=Lze({defaultColorScheme:u,forceColorScheme:g,manager:d,getRootElement:p});return Fze({respectReducedMotion:e?.respectReducedMotion||!1,getRootElement:p}),y.jsx(pw.Provider,{value:{colorScheme:x,setColorScheme:k,clearColorScheme:C,getRootElement:p,classNamesPrefix:c,getStyleNonce:n,cssVariablesResolver:f,cssVariablesSelector:s,withStaticClasses:o,stylesTransform:v,env:w},children:y.jsxs(Oq,{theme:e,children:[l&&y.jsx(Fq,{cssVariablesSelector:s,deduplicateCssVariables:i}),a&&y.jsx(Nze,{}),r]})})}q7.displayName="@mantine/core/MantineProvider";function H7({classNames:e,styles:r,props:n,stylesCtx:o}){const a=lo();return{resolvedClassNames:dw({theme:a,classNames:e,props:n,stylesCtx:o||void 0}),resolvedStyles:uw({theme:a,styles:r,props:n,stylesCtx:o||void 0})}}const Vze={always:"mantine-focus-always",auto:"mantine-focus-auto",never:"mantine-focus-never"};function qze({theme:e,options:r,unstyled:n}){return Qi(r?.focusable&&!n&&(e.focusClassName||Vze[e.focusRing]),r?.active&&!n&&e.activeClassName)}function Hze({selector:e,stylesCtx:r,options:n,props:o,theme:a}){return dw({theme:a,classNames:n?.classNames,props:n?.props||o,stylesCtx:r})[e]}function Vq({selector:e,stylesCtx:r,theme:n,classNames:o,props:a}){return dw({theme:n,classNames:o,props:a,stylesCtx:r})[e]}function Uze({rootSelector:e,selector:r,className:n}){return e===r?n:void 0}function Wze({selector:e,classes:r,unstyled:n}){return n?void 0:r[e]}function Gze({themeName:e,classNamesPrefix:r,selector:n,withStaticClass:o}){return o===!1?[]:e.map(a=>`${r}-${a}-${n}`)}function Yze({themeName:e,theme:r,selector:n,props:o,stylesCtx:a}){return e.map(i=>dw({theme:r,classNames:r.components[i]?.classNames,props:o,stylesCtx:a})?.[n])}function Xze({options:e,classes:r,selector:n,unstyled:o}){return e?.variant&&!o?r[`${n}--${e.variant}`]:void 0}function Zze({theme:e,options:r,themeName:n,selector:o,classNamesPrefix:a,classNames:i,classes:l,unstyled:s,className:c,rootSelector:d,props:u,stylesCtx:p,withStaticClasses:f,headless:g,transformedStyles:v}){return Qi(qze({theme:e,options:r,unstyled:s||g}),Yze({theme:e,themeName:n,selector:o,props:u,stylesCtx:p}),Xze({options:r,classes:l,selector:o,unstyled:s}),Vq({selector:o,stylesCtx:p,theme:e,classNames:i,props:u}),Vq({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};
2025-12-16 12:13:34 +01:00
--colors-likec4-tag-bg-hover: color-mix(in oklab, ${r}, var(--colors-likec4-mix-color) 20%);
`;if(!iNe.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 sNe(e,r){return!e||Gu(e)?"":Jr(Wx(e),PV(([n,o])=>[`:is(${r} [data-likec4-tag="${n}"]) {`,lNe(o),"}"]),VV(`
`))}function cNe({children:e,rootSelector:r}){const n=aNe().tags,o=sNe(n,r);return y.jsxs(DW.Provider,{value:n,children:[o!==""&&y.jsx(dNe,{stylesheet:o}),e]})}const dNe=S.memo(({stylesheet:e})=>{const r=Zu()?.();return y.jsx("style",{"data-likec4-tags":!0,type:"text/css",dangerouslySetInnerHTML:{__html:e},nonce:r})});function uNe(e){return S.useContext(DW)[e]??{color:"tomato"}}function NW(){return ti().replace("mantine-","likec4-")}var pNe="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 uG(e){const r=aG(e.config.target);return r?{target:r.map(n=>typeof n=="string"?f3(e.parent,n):n)}:e.parent.initial}function dp(e){return e.type==="history"}function pG(e){const r=hG(e);for(const n of r)for(const o of vy(n,e))r.add(o);return r}function hG(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 If(o))n(a)}}return n(e),r}function Lf(e,r){if(h3(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 f3(e,r){if(typeof r=="string"&&h3(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=Lf(o,a)}return o}function m3(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=>Lf(e,a)).filter(Boolean);return[e.machine.root,e].concat(o,n.reduce((a,i)=>{const l=Lf(e,i);if(!l)return a;const s=m3(l,r[i]);return a.concat(s)},[]))}function rMe(e,r,n,o){const a=Lf(e,r).next(n,o);return!a||!a.length?e.next(n,o):a}function nMe(e,r,n,o){const a=Object.keys(r),i=Lf(e,a[0]),l=kS(i,r[a[0]],n,o);return!l||!l.length?e.next(n,o):l}function oMe(e,r,n,o){const a=[];for(const i of Object.keys(r)){const l=r[i];if(!l)continue;const s=Lf(e,i),c=kS(s,l,n,o);c&&a.push(...c)}return a.length?a:e.next(n,o)}function kS(e,r,n,o){return typeof r=="string"?rMe(e,r,n,o):Object.keys(r).length===1?nMe(e,r,n,o):oMe(e,r,n,o)}function aMe(e){return Object.keys(e.states).map(r=>e.states[r]).filter(r=>r.type==="history")}function yd(e,r){let n=e;for(;n.parent&&n.parent!==r;)n=n.parent;return n.parent===r}function iMe(e,r){const n=new Set(e),o=new Set(r);for(const a of n)if(o.has(a))return!0;for(const a of o)if(n.has(a))return!0;return!1}function fG(e,r,n){const o=new Set;for(const a of e){let i=!1;const l=new Set;for(const s of o)if(iMe(SS([a],r,n),SS([s],r,n)))if(yd(a.source,s.source))l.add(s);else{i=!0;break}if(!i){for(const s of l)o.delete(s);o.add(a)}}return Array.from(o)}function lMe(e){const[r,...n]=e;for(const o of vy(r,void 0))if(n.every(a=>yd(a,o)))return o}function _S(e,r){if(!e.target)return[];const n=new Set;for(const o of e.target)if(dp(o))if(r[o.id])for(const a of r[o.id])n.add(a);else for(const a of _S(uG(o),r))n.add(a);else n.add(o);return[...n]}function mG(e,r){const n=_S(e,r);if(!n)return;if(!e.reenter&&n.every(a=>a===e.source||yd(a,e.source)))return e.source;const o=lMe(n.concat(e.source));if(o)return o;if(!e.reenter)return e.source.machine.root}function SS(e,r,n){const o=new Set;for(const a of e)if(a.target?.length){const i=mG(a,n);a.reenter&&a.source===i&&o.add(i);for(const l of r)yd(l,i)&&o.add(l)}return[...o]}function sMe(e,r){if(e.length!==r.size)return!1;for(const n of e)if(!r.has(n))return!1;return!0}function ES(e,r,n,o,a,i){if(!e.length)return r;const l=new Set(r._nodes);let s=r.historyValue;const c=fG(e,l,s);let d=r;a||([d,s]=pMe(d,o,n,c,l,s,i,n.actionExecutor)),d=Vf(d,o,n,c.flatMap(p=>p.actions),i,void 0),d=dMe(d,o,n,c,l,i,s,a);const u=[...l];d.status==="done"&&(d=Vf(d,o,n,u.sort((p,f)=>f.order-p.order).flatMap(p=>p.exit),i,void 0));try{return s===r.historyValue&&sMe(r._nodes,l)?d:up(d,{_nodes:u,historyValue:s})}catch(p){throw p}}function cMe(e,r,n,o,a){if(o.output===void 0)return;const i=fS(a.id,a.output!==void 0&&a.parent?gS(a.output,e.context,r,n.self):void 0);return gS(o.output,e.context,i,n.self)}function dMe(e,r,n,o,a,i,l,s){let c=e;const d=new Set,u=new Set;uMe(o,l,u,d),s&&u.add(e.machine.root);const p=new Set;for(const f of[...d].sort((g,v)=>g.order-v.order)){a.add(f);const g=[];g.push(...f.entry);for(const v of f.invoke)g.push(d3(v.src,{...v,syncSnapshot:!!v.onSnapshot}));if(u.has(f)){const v=f.initial.actions;g.
${p.message}`)}if(u){a.push(...s.actions),i=s;break}}return i?[i]:void 0}get events(){return qf(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 RMe="#";class zS{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 b3(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 zS(this.config,{actions:{...n,...r.actions},guards:{...o,...r.guards},actors:{...a,...r.actors},delays:{...i,...r.delays}})}resolveState(r){const n=mMe(this.root,r.value),o=p3(m3(this.root,n));return g3({_nodes:[...o],context:r.context||{},children:{},status:wS(o,this.root)?"done":r.status||"active",output:r.output,error:r.error,historyValue:r.historyValue},this)}transition(r,n,o){return $S(r,n,o,[]).snapshot}microstep(r,n,o){return $S(r,n,o,[]).microstates}getTransitionData(r,n){return kS(this.root,r.value,r,n)||[]}getPreInitialState(r,n,o){const{context:a}=this.config,i=g3({context:typeof a!="function"&&a?a:{},_nodes:[this.root],children:{},status:"active"},this);return typeof a=="function"?Vf(i,n,r,[Bt(({spawn:l,event:s,self:c})=>a({spawn:l,input:s.input,self:c}))],o,void 0):i}getInitialSnapshot(r,n){const o=JW(n),a=[],i=this.getPreInitialState(r,o,a),l=ES([{target:[...hG(this.root)],source:this.root,reenter:!0,actions:[],eventType:null,toJSON:null}],i,r,o,!0,a),{snapshot:s}=$S(l,o,r,a);return s}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=h3(n[0])?n[0].slice(RMe.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 f3(i,o)}get definition(){return this.root.definition}toJSON(){return this.definition}getPersistedSnapshot(r,n){return _Me(r,n)}restoreSnapshot(r,n){const o={},a=r.children;Object.keys(a).forEach(p=>{const f=a[p],g=f.snapshot,v=f.src,w=typeof v=="string"?yS(this,v):v;if(!w)return;const x=Of(w,{id:p,parent:n.self,syncSnapshot:f.syncSnapshot,snapshot:g,src:v,systemId:f.systemId});o[p]=x});function i(p,f){if(f instanceof b3)return f;try{return p.machine.getStateNodeById(f.id)}catch{}}function l(p,f){if(!f||typeof f!="object")return{};const g={};for(const v in f){const w=f[v];for(const x of w){const k=i(p,x);k&&(g[v]??=[],g[v].push(k))}}return g}const s=l(this.root,r.historyValue),c=g3({...r,children:o,_nodes:Array.from(p3(m3(this.root,r.value))),historyValue:s},this),d=new Set;function u(p,f){if(!d.has(p)){d.add(p);for(const g in p){const v=p[g];if(v&&typeof v=="object"){if("xstate$$type"in v&&v.xstate$$type===bS){p[g]=f[v.id];continue}u(v,f)}}}}return u(c.context,o),c}}function TMe(e,r,n,o,{event:a}){const i=typeof a=="function"?a(n,o):a;return[r,{event:i},void 0]}function jMe(e,{event:r}){e.defer(()=>e.emit(r))}function RS(e){function r(n,o){}return r.type="xstate.emit",r.event=e,r.resolve=TMe,r.execute=jMe,r}let TS=(function(e){return e.Parent="#_parent",e.Internal="#_internal",e})({});function AMe(e,r,n,o,{to:a,event:i,id:l,delay:s},c){const d=r.machine.implementations.delays;if(typeof i=="string")throw
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
[data-motion-pop-id="${a}"] {
position: absolute !important;
width: ${d}px !important;
height: ${u}px !important;
2025-12-16 12:13:34 +01:00
${v}px !important;
top: ${p}px !important;
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
}
`),()=>{x.contains(w)&&x.removeChild(w)}},[r]),y.jsx(LOe,{isPresent:r,childRef:i,sizeRef:l,children:S.cloneElement(e,{ref:c})})}const VOe=({children:e,initial:r,isPresent:n,onExitComplete:o,custom:a,presenceAffectsLayout:i,mode:l,anchorX:s,root:c})=>{const d=tm(qOe),u=S.useId();let p=!0,f=S.useMemo(()=>(p=!1,{id:u,initial:r,isPresent:n,custom:a,onExitComplete:g=>{d.set(g,!0);for(const v of d.values())if(!v)return;o&&o()},register:g=>(d.set(g,!1),()=>d.delete(g))}),[n,d,o]);return i&&p&&(f={...f}),S.useMemo(()=>{d.forEach((g,v)=>d.set(v,!1))},[n]),S.useEffect(()=>{!n&&!d.size&&o&&o()},[n]),l==="popLayout"&&(e=y.jsx(FOe,{isPresent:n,anchorX:s,root:c,children:e})),y.jsx(j3.Provider,{value:f,children:e})};function qOe(){return new Map}function _X(e=!0){const r=S.useContext(j3);if(r===null)return[!0,null];const{isPresent:n,onExitComplete:o,register:a}=r,i=S.useId();S.useEffect(()=>{if(e)return a(i)},[e]);const l=S.useCallback(()=>e&&o&&o(i),[i,o,e]);return!n&&o?[!1,l]:[!0]}const A3=e=>e.key||"";function SX(e){const r=[];return S.Children.forEach(e,n=>{S.isValidElement(n)&&r.push(n)}),r}const Cn=({children:e,custom:r,initial:n=!0,onExitComplete:o,presenceAffectsLayout:a=!0,mode:i="sync",propagate:l=!1,anchorX:s="left",root:c})=>{const[d,u]=_X(l),p=S.useMemo(()=>SX(e),[e]),f=l&&!d?[]:p.map(A3),g=S.useRef(!0),v=S.useRef(p),w=tm(()=>new Map),[x,k]=S.useState(p),[C,_]=S.useState(p);IE(()=>{g.current=!1,v.current=p;for(let T=0;T<C.length;T++){const A=A3(C[T]);f.includes(A)?w.delete(A):w.get(A)!==!0&&w.set(A,!1)}},[C,f.length,f.join("-")]);const $=[];if(p!==x){let T=[...p];for(let A=0;A<C.length;A++){const R=C[A],j=A3(R);f.includes(j)||(T.splice(A,0,R),$.push(R))}return i==="wait"&&$.length&&(T=$),_(SX(T)),k(p),null}const{forceRender:z}=S.useContext(Ny);return y.jsx(y.Fragment,{children:C.map(T=>{const A=A3(T),R=l&&!d?!1:p===C||f.includes(A),j=()=>{if(w.has(A))w.set(A,!0);else return;let O=!0;w.forEach(P=>{P||(O=!1)}),O&&(z?.(),_(v.current),l&&u?.(),o&&o())};return y.jsx(VOe,{isPresent:R,initial:!g.current||n?void 0:!1,custom:r,presenceAffectsLayout:a,mode:i,root:c,onExitComplete:R?void 0:j,anchorX:s,children:T},A)})})},HOe=S.createContext(null);function UOe(){const e=S.useRef(!1);return IE(()=>(e.current=!0,()=>{e.current=!1}),[]),e}function WOe(){const e=UOe(),[r,n]=S.useState(0),o=S.useCallback(()=>{e.current&&n(r+1)},[r]);return[S.useCallback(()=>Dr.postRender(o),[o]),r]}const GOe=e=>!e.isLayoutDirty&&e.willUpdate(!1);function YOe(){const e=new Set,r=new WeakMap,n=()=>e.forEach(GOe);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 EX=e=>e===!0,XOe=e=>EX(e===!0)||e==="id",rm=({children:e,id:r,inherit:n=!0})=>{const o=S.useContext(Ny),a=S.useContext(HOe),[i,l]=WOe(),s=S.useRef(null),c=o.id||a;s.current===null&&(XOe(n)&&c&&(r=r?c+"-"+r:c),s.current={id:r,group:EX(n)&&o.group||YOe()});const d=S.useMemo(()=>({...s.current,forceRender:i}),[l]);return y.jsx(Ny.Provider,{value:d,children:e})},LE=S.createContext({strict:!1});function FE(e){for(const r in e)Jf[r]={...Jf[r],...e[r]}}function ZOe({children:e,features:r,strict:n=!1}){const[,o]=S.useState(!VE(r)),a=S.useRef(void 0);if(!VE(r)){const{renderer:i,...l}=r;a.current=i,FE(l)}return S.useEffect(()=>{VE(r)&&r().then(({renderer:i,...l})=>{FE(l),a.current=i,o(!0)})},[]),y.jsx(LE.Provider,{value:{renderer:a.current,strict:n},children:e})}function VE(e){return typeof e=="function"}const KOe=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 D3(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,
2025-12-16 12:13:34 +01:00
color-mix(in oklab, var(--likec4-palette-fill) 60%, transparent),
color-mix(in oklab, var(--likec4-palette-fill) 20%, transparent) 8px,
color-mix(in oklab, var(--likec4-palette-fill) 14%, transparent) 20px,
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
transparent 80px
),
linear-gradient(180deg, var(--likec4-palette-fill), var(--likec4-palette-fill) 4px, transparent 4px)
2025-12-16 12:13:34 +01:00
`,"& .react-flow__attribution":{display:"none"}}),IFe=fe({flex:0,cursor:"move"}),LFe=fe({display:"block",fontFamily:"likec4.element",fontOpticalSizing:"auto",fontStyle:"normal",fontWeight:600,fontSize:"24px",lineHeight:"xs"}),bC="40px",FFe=fe({flex:`0 0 ${bC}`,height:bC,width:bC,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%))
2025-12-16 12:13:34 +01:00
`},"& img":{objectFit:"contain"}}),Y3="--view-title-color",X3="--icon-color",VFe=fe({width:"100%",background:"mantine.colors.body",borderRadius:"sm",padding:"[10px 8px]",transition:"fast",border:"1px dashed",borderColor:"mantine.colors.defaultBorder",[Y3]:"{colors.mantine.colors.dark[1]}",_hover:{background:"mantine.colors.defaultHover",[X3]:"{colors.mantine.colors.dark[1]}",[Y3]:"{colors.mantine.colors.defaultColor}"},_dark:{background:"mantine.colors.dark[6]"},_light:{[X3]:"{colors.mantine.colors.gray[6]}",[Y3]:"{colors.mantine.colors.gray[7]}",_hover:{[X3]:"{colors.mantine.colors.gray[7]}"}},"& .mantine-ThemeIcon-root":{transition:"fast",color:`[var(${X3}, {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)"}}),qFe=fe({transition:"fast",color:`[var(${Y3}, {colors.mantine.colors.gray[7]})]`,fontSize:"15px",fontWeight:500,lineHeight:"1.4"}),HFe=fe({flex:1,display:"flex",flexDirection:"column",justifyContent:"stretch",overflow:"hidden",gap:"sm"}),UFe=fe({background:"mantine.colors.gray[1]",borderRadius:"sm",flexWrap:"nowrap",gap:"1.5",padding:"1",_dark:{background:"mantine.colors.dark[7]"}}),WFe=fe({fontSize:"xs",fontWeight:500,flexGrow:1,padding:"[6px 8px]",transition:"fast",borderRadius:"sm",color:"mantine.colors.gray[7]",_hover:{transitionTimingFunction:"out",color:"mantine.colors.defaultColor",background:"mantine.colors.gray[3]"},"&[data-active]":{transition:"none",background:"mantine.colors.white",shadow:"xs",color:"mantine.colors.defaultColor"},_dark:{color:"mantine.colors.dark[1]",_hover:{color:"mantine.colors.white",background:"mantine.colors.dark[6]"},"&:is([data-active])":{color:"mantine.colors.white",background:"mantine.colors.dark[5]"}}}),GFe=fe({flex:1,overflow:"hidden",position:"relative","&:not(:has(.mantine-ScrollArea-root))":{paddingLeft:"1",paddingRight:"1"},"& .mantine-ScrollArea-root":{width:"100%",height:"100%","& > div":{paddingLeft:"1",paddingRight:"1"}}}),YFe=fe({flex:1,display:"grid",gridTemplateColumns:"min-content 1fr",gridAutoRows:"min-content max-content",gap:"[24px 20px]",alignItems:"baseline",justifyItems:"stretch"}),XFe=fe({justifySelf:"end",textAlign:"right",userSelect:"none"}),ZFe=fe({position:"absolute",width:"14px",height:"14px",border:"3.5px solid",borderColor:"mantine.colors.dark[3]",borderTop:"none",borderLeft:"none",borderRadius:"2px",bottom:"0.5",right:"0.5",transition:"fast",cursor:"se-resize",_hover:{borderWidth:"4px",borderColor:"mantine.colors.dark[1]"}}),KFe=[["path",{d:"M6 9l6 6l6 -6",key:"svg-0"}]],xC=wt("outline","chevron-down","ChevronDown",KFe),QFe=[["path",{d:"M9 6l6 6l-6 6",key:"svg-0"}]],Sd=wt("outline","chevron-right","ChevronRight",QFe);function pK({children:e}){return y.jsx(y.Fragment,{children:e})}function hK({value:e,isExpanded:r}){const[n,o]=S.useState(!1),a=S.useRef(null);return S.useEffect(()=>{a.current&&o(a.current.scrollWidth>a.current.clientWidth)},[e]),y.jsx(_n,{label:n&&!r?e:null,multiline:!0,w:300,withinPortal:!0,children:y.jsx(at,{ref:a,component:"div",className:fe({fontSize:"sm",padding:"xs",userSelect:"all",color:"mantine.colors.text",lineHeight:1.4,whiteSpace:r?"pre-wrap":"nowrap",overflow:r?"visible":"hidden",textOverflow:r?"unset":"ellipsis",wordBreak:r?"break-word":"normal",minWidth:0,width:"100%"}),children:e})})}function JFe({values:e,isExpanded:r}){return r?y.jsx(Io,{gap:"xs",children:e.map((n,o)=>y.jsxs(Zs,{align:"center",gap:"xs",children:[y.jsx(at,{className:fe({fontSize:"xs",color:"mantine.colors.gray[5]",fontWeight:500,flexShrink:0,_dark:{color:"mantine.colors.dark[3]"}}),children:"•"}),y.jsx(Se,{className:fe({minHeight:"32px",display:"flex",alignItems:"center",flex:1}),children:y.jsx(hK,{value:n,isExpanded:!0})})]},o))}):y.jsx(Se,{className:fe({minHeight:"32px",display:"flex",alignItems:"center",padding:"xs",gap:"xs",flexWrap:"wrap",minWidth:0,overflow:"hidden"}),children:e.map((n,o)=>y.jsxs(Zs,{align:"center",gap:"xs",style:{minWidth:0},children:[y.jsx(at,{classN
`)?r.split(`
`).map(l=>l.trim()).filter(Boolean):[r],o=n.length>1,[a,i]=S.useState(!1);return y.jsxs(y.Fragment,{children:[o?y.jsx(pr,{onClick:()=>{i(!a)},className:fe({fontSize:"xs",color:"mantine.colors.dimmed",justifySelf:"end",textAlign:"right",userSelect:"none",display:"flex",alignItems:"center",justifyContent:"flex-end",gap:"xs",padding:"[4px 8px]",borderRadius:"sm",whiteSpace:"nowrap",transition:"all 150ms ease",_hover:{backgroundColor:"mantine.colors.gray[1]",color:"mantine.colors.primary[6]",_dark:{backgroundColor:"mantine.colors.dark[7]",color:"mantine.colors.primary[4]"}}}),children:y.jsxs(Zs,{align:"center",gap:"xs",children:[y.jsxs(at,{component:"span",size:"xs",fw:700,children:[e,":"]}),y.jsx(at,{component:"span",className:fe({fontSize:"xs",fontWeight:500,color:"mantine.colors.gray[6]",backgroundColor:"mantine.colors.gray[1]",padding:"[1px 4px]",borderRadius:"xs",_dark:{color:"mantine.colors.dark[2]",backgroundColor:"mantine.colors.dark[6]"}}),children:n.length}),a?y.jsx(xC,{size:12}):y.jsx(Sd,{size:12})]})}):y.jsxs(at,{component:"div",className:fe({fontSize:"xs",color:"mantine.colors.dimmed",justifySelf:"end",textAlign:"right",userSelect:"none",whiteSpace:"nowrap",padding:"[4px 8px]",fontWeight:700}),children:[e,":"]}),y.jsx(Se,{className:fe({justifySelf:"stretch",alignSelf:"start"}),children:o?y.jsx(JFe,{values:n,isExpanded:a}):y.jsx(Se,{className:fe({minHeight:"32px",display:"flex",alignItems:"center"}),children:y.jsx(hK,{value:n[0]||"",isExpanded:a})})})]})}const tVe=fe({"&[data-level='1']":{marginBottom:"sm"}}),rVe=fe({cursor:"default",marginTop:"0",marginBottom:"0"}),fK=fe({transition:"fast",color:"mantine.colors.gray[7]",_dark:{color:"mantine.colors.dark[1]"},"& > *":{transition:"fast"},_hover:{transitionTimingFunction:"out","& > :not([data-no-transform])":{transitionTimingFunction:"out",transform:"translateX(1px)"}}}),nVe=Ge(fK),oVe=Ge(fK,fe({cursor:"pointer",width:"100%",justifyContent:"stretch",flexWrap:"nowrap",height:"36px",paddingInlineStart:"[16px]",paddingInlineEnd:"2.5",borderRadius:"sm",alignItems:"center",color:"mantine.colors.gray[7]",_dark:{color:"mantine.colors.gray.lightColor"},_hover:{background:"mantine.colors.gray.lightHover"},"& .tabler-icon":{transition:"fast",width:"90%",opacity:.65}})),aVe=[["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"}]],Gy=wt("outline","info-circle","InfoCircle",aVe),iVe=[["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"}]],lVe=wt("outline","target","Target",iVe),sVe=[["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"}]],gi=wt("outline","zoom-scan","ZoomScan",sVe),cVe=({node:e})=>y.jsxs(en,{className:nVe,gap:6,align:"baseline",wrap:"nowrap",children:[y.jsxs(at,{component:"div",fz:11,c:"dimmed",children:[e.kind,":"]}),y.jsx(at,{component:"div",fz:"sm",fw:"500",children:e.title})]}),dVe=({instance:e})=>{const r=Mt(),n=r.currentView.id,o=[...e.views()];return y.jsxs(en,{className:oVe,gap:4,children:[y.jsx($a,{color:"gray",variant:"transparent",size:"xs",flex:0,children:y.jsx(lVe,{stroke:1.2})}),y.jsx(at,{component:"div",fz:"sm",fw:"500",flex:"1 1 100%",children:e.title}),y.jsxs(Se,{onClick:nn,pos:"relative","data-no-transform":!0,flex:0,children:[o.length===0&&y.jsx(Vn,{size:"compact-xs",variant:"transparent",color:"gray",disabled:!0,children:"no views"}),o.length>0&&y.jsxs(tn,{shadow:"md",withinPortal:!1,position:"bottom-start",offset:0,closeOnClickOutside:!0,clickOutsideEvents:["pointerdown","mousedown","click"],closeOnEscape:!0,trapFocus:!0,children:[y.jsx(tn.Target,{children:y.jsxs(Vn,{size:"compact-xs",variant:"subtle",color:"gray",children:[o.length," view",o.length>1?
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
a ${a},${i} 0,0,0 ${-e} 0
2025-12-16 12:13:34 +01:00
l 0,${l}
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
a ${a},${i} 0,0,0 ${e} 0
2025-12-16 12:13:34 +01:00
l 0,${-l}
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
z
`.replace(/\s+/g," ").trim(),ry:i,rx:a}}function NQ(e,r,n=.185){const o=r,a=Math.round(o/2),i=Cd(o/2*n),l=e-2*i;return{path:`
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
M ${i},0
a ${i},${a} 0,0,0 0 ${o}
2025-12-16 12:13:34 +01:00
l ${l},0
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
a ${i},${a} 0,0,0 0 ${-o}
z`.replace(/\s+/g," ").trim(),ry:a,rx:i}}const xp={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 MQ({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-xp.width-6,y:n-xp.height,width:xp.width,height:xp.height,viewBox:`0 0 ${xp.width} ${xp.height}`,"data-likec4-fill":"mix-stroke",children:y.jsx("path",{strokeWidth:0,d:xp.path})})]});case"queue":{const{path:o,rx:a,ry:i}=NQ(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}=DQ(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 Xo(e)}}function qqe({shape:e,w:r,h:n}){let o;switch(e){case"queue":o=y.jsx("path",{d:NQ(r,n).path});break;case"storage":case"cylinder":{o=y.jsx("path",{d:DQ(r,n).path});break}default:{o=y.jsx("rect",{x:-3,y:-3,width:r+6,height:n+6,rx:8});break}}return y.jsx("g",{className:"likec4-shape-outline",children:o})}function Hqe({multiple:e,withOutLine:r}){return y.jsxs("div",{className:GZ({shapetype:"html"}),children:[e&&y.jsx("div",{className:"likec4-shape-multiple"}),r&&y.jsx("div",{className:"likec4-shape-outline"})]})}function lm({data:e,width:r,height:n,showSeletionOutline:o=!0}){let a=r&&r>10?r:e.width,i=n&&n>10?n:e.height;const l=e.style?.multiple??!1;if(e.shape==="rectangle")return y.jsx(Hqe,{multiple:l,withOutLine:o});const s=GZ({shapetype:"svg"});return y.jsxs(y.Fragment,{children:[l&&y.jsx("svg",{className:s,"data-likec4-shape-multiple":"true",viewBox:`0 0 ${a} ${i}`,children:y.jsx(MQ,{shape:e.shape,w:a,h:i})}),y.jsxs("svg",{className:s,viewBox:`0 0 ${a} ${i}`,children:[o&&y.jsx(qqe,{shape:e.shape,w:a,h:i}),y.jsx(MQ,{shape:e.shape,w:a,h:i})]})]})}const wp=S.forwardRef(({value:e,textScale:r=1,uselikec4palette:n=!1,hideIfEmpty:o=!1,emptyText:a="no content",className:i,style:l,fontSize:s,...c},d)=>{if(e.isEmpty&&o)return null;const u=e.nonEmpty?e.isMarkdown?{dangerouslySetInnerHTML:{__html:e.html}}:{children:y.jsx("p",{children:e.text})}:{children:y.jsx(at,{component:"span",fz:"xs",c:"dimmed",style:{userSelect:"none"},children:a})};return y.jsx(hr,{ref:d,...c,className:Ge(cFe({uselikec4palette:n,value:e.isMarkdown?"markdown":"plaintext"}),i),style:{...l,...s&&{"--text-fz":`var(--font-sizes-${s}, var(--font-sizes-md))`},...r!==1&&{"--mantine-scale":r}},...u})});wp.displayName="Markdown";const PQ=S.forwardRef(({className:e,...r},n)=>y.jsx("div",{...r,ref:n,className:Ge(e,lFe(),"likec4-element")})),BQ=({data:e,...r})=>y.jsx(tx,{element:e,...r}),OQ=S.forwardRef(({className:e,...r},n)=>y.jsx("div",{...r,className:Ge(e,"likec4-element-node-content"),ref:n})),IQ=S.forwardRef(({data:{title:e,style:r},className:n,...o},a)=>{const{size:i}=mb(r),l=i==="sm"||i==="xs";return y.jsx(at,{component:"div",...o,className:
${ve.message}`)}else throw new Error(`Invalid target: "${oe}" is not a valid target from the root node. Did you mean ".${oe}"?`)})}function Uo(J){const ee=L(J.config.target);return ee?{target:ee.map(oe=>typeof oe=="string"?bs(J.parent,oe):oe)}:J.parent.initial}function jo(J){return J.type==="history"}function sa(J){const ee=Al(J);for(const oe of ee)for(const ie of Ye(oe,J))ee.add(ie);return ee}function Al(J){const ee=new Set;function oe(ie){if(!ee.has(ie)){if(ee.add(ie),ie.type==="compound")oe(ie.initial.target[0]);else if(ie.type==="parallel")for(const le of ke(ie))oe(le)}}return oe(J),ee}function Ao(J,ee){if(Ht(ee))return J.machine.getStateNodeById(ee);if(!J.states)throw new Error(`Unable to retrieve child state '${ee}' from '${J.id}'; no child states exist.`);const oe=J.states[ee];if(!oe)throw new Error(`Child state '${ee}' does not exist on '${J.id}'`);return oe}function bs(J,ee){if(typeof ee=="string"&&Ht(ee))try{return J.machine.getStateNodeById(ee)}catch{}const oe=C(ee).slice();let ie=J;for(;oe.length;){const le=oe.shift();if(!le.length)break;ie=Ao(ie,le)}return ie}function xs(J,ee){if(typeof ee=="string"){const le=J.states[ee];if(!le)throw new Error(`State '${ee}' does not exist on '${J.id}'`);return[J,le]}const oe=Object.keys(ee),ie=oe.map(le=>Ao(J,le)).filter(Boolean);return[J.machine.root,J].concat(ie,oe.reduce((le,ve)=>{const Ae=Ao(J,ve);if(!Ae)return le;const Fe=xs(Ae,ee[ve]);return le.concat(Fe)},[]))}function kc(J,ee,oe,ie){const le=Ao(J,ee).next(oe,ie);return!le||!le.length?J.next(oe,ie):le}function Dl(J,ee,oe,ie){const le=Object.keys(ee),ve=Ao(J,le[0]),Ae=ws(ve,ee[le[0]],oe,ie);return!Ae||!Ae.length?J.next(oe,ie):Ae}function ih(J,ee,oe,ie){const le=[];for(const ve of Object.keys(ee)){const Ae=ee[ve];if(!Ae)continue;const Fe=Ao(J,ve),rt=ws(Fe,Ae,oe,ie);rt&&le.push(...rt)}return le.length?le:J.next(oe,ie)}function ws(J,ee,oe,ie){return typeof ee=="string"?kc(J,ee,oe,ie):Object.keys(ee).length===1?Dl(J,ee,oe,ie):ih(J,ee,oe,ie)}function Hd(J){return Object.keys(J.states).map(ee=>J.states[ee]).filter(ee=>ee.type==="history")}function Wo(J,ee){let oe=J;for(;oe.parent&&oe.parent!==ee;)oe=oe.parent;return oe.parent===ee}function _c(J,ee){const oe=new Set(J),ie=new Set(ee);for(const le of oe)if(ie.has(le))return!0;for(const le of ie)if(oe.has(le))return!0;return!1}function ks(J,ee,oe){const ie=new Set;for(const le of J){let ve=!1;const Ae=new Set;for(const Fe of ie)if(_c(Mr([le],ee,oe),Mr([Fe],ee,oe)))if(Wo(le.source,Fe.source))Ae.add(Fe);else{ve=!0;break}if(!ve){for(const Fe of Ae)ie.delete(Fe);ie.add(le)}}return Array.from(ie)}function Ud(J){const[ee,...oe]=J;for(const ie of Ye(ee,void 0))if(oe.every(le=>Wo(le,ie)))return ie}function _s(J,ee){if(!J.target)return[];const oe=new Set;for(const ie of J.target)if(jo(ie))if(ee[ie.id])for(const le of ee[ie.id])oe.add(le);else for(const le of _s(Uo(ie),ee))oe.add(le);else oe.add(ie);return[...oe]}function Go(J,ee){const oe=_s(J,ee);if(!oe)return;if(!J.reenter&&oe.every(le=>le===J.source||Wo(le,J.source)))return J.source;const ie=Ud(oe.concat(J.source));if(ie)return ie;if(!J.reenter)return J.source.machine.root}function Mr(J,ee,oe){const ie=new Set;for(const le of J)if(le.target?.length){const ve=Go(le,oe);le.reenter&&le.source===ve&&ie.add(ve);for(const Ae of ee)Wo(Ae,ve)&&ie.add(Ae)}return[...ie]}function Nn(J,ee){if(J.length!==ee.size)return!1;for(const oe of J)if(!ee.has(oe))return!1;return!0}function Do(J,ee,oe,ie,le,ve){if(!J.length)return ee;const Ae=new Set(ee._nodes);let Fe=ee.historyValue;const rt=ks(J,Ae,Fe);let lt=ee;le||([lt,Fe]=Ci(lt,ie,oe,rt,Ae,Fe,ve,oe.actionExecutor)),lt=ho(lt,ie,oe,rt.flatMap(Ze=>Ze.actions),ve,void 0),lt=Sc(lt,ie,oe,rt,Ae,ve,Fe,le);const It=[...Ae];lt.status==="done"&&(lt=ho(lt,ie,oe,It.sort((Ze,Ke)=>Ke.order-Ze.order).flatMap(Ze=>Ze.exit),ve,void 0));try{return Fe===ee.historyValue&&Nn(ee._nodes,Ae)?lt:Gr(lt,{_nodes:It,historyValue:Fe})}catch(Ze){throw Ze}}function Nl(J,ee,oe,ie,le){if(ie.output===void 0)return;const ve=p(le.id,le.output!==void 0&&le.parent?R(le.output,J.context,ee,oe.self):void 0);return R(ie.output,J.context,ve,oe
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
drop-shadow(0 2px 3px rgb(0 0 0 / 22%))
drop-shadow(0 1px 8px rgb(0 0 0 / 10%))
`});const XYe=fe({fontWeight:500,letterSpacing:"0.2px",paddingTop:"0",paddingBottom:"0",textTransform:"lowercase",transition:"all 150ms ease-in-out",cursor:"pointer","--badge-radius":"2px","--badge-fz":"9.5px","--badge-padding-x":"3px","--badge-height":"13.5px","--badge-lh":"1","--badge-bg":"var(--likec4-palette-fill)","--badge-color":"var(--likec4-palette-hiContrast)"}),ZYe=[["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"}]],KYe=wt("outline","help-circle","HelpCircle",ZYe),QYe=[["path",{d:"M7 7l10 10",key:"svg-0"}],["path",{d:"M17 8l0 9l-9 0",key:"svg-1"}]],JYe=wt("outline","arrow-down-right","ArrowDownRight",QYe),eXe=({value:e})=>{const{title:r,color:n="primary",shape:o="rectangle"}=e,[a,i]=S.useState(null),l=Mt(),s=300,c=200;return y.jsx(Jw,{shadow:"none",px:"xs",py:"sm",className:Ge(YYe),"data-likec4-color":n,onMouseEnter:()=>{i(null),l.highlightNotation(e)},onMouseLeave:()=>{i(null),l.unhighlightNotation()},children:y.jsxs(en,{gap:"sm",align:"stretch",wrap:"nowrap",children:[y.jsx(Se,{flex:"0 0 70px",style:{position:"relative",width:70,height:NEe(70*(c/s),0)},children:y.jsx(lm,{data:{shape:o,width:s,height:c}})}),y.jsxs(Io,{gap:4,flex:1,children:[y.jsx(en,{gap:4,flex:"0 0 auto",children:e.kinds.map(d=>y.jsx(Ks,{className:Ge(XYe),onMouseEnter:()=>{i(d),l.highlightNotation(e,d)},onMouseLeave:()=>{i(null),l.highlightNotation(e)},opacity:IV(a)&&a!==d?.25:1,children:d},d))}),y.jsx(at,{component:"div",fz:"sm",fw:500,lh:"1.25",style:{textWrap:"pretty"},children:r})]})]})})},tXe=e=>({id:e.view.id,notations:e.view.notation?.nodes??[]}),rXe=S.memo(()=>{const e=pC(s=>s.height),{id:r,notations:n}=ci(tXe),[o,a]=X$e({key:"notation-webview-collapsed",defaultValue:!0}),i=n.length>0,l=fm();return y.jsxs(Cn,{children:[!i&&y.jsx(pi.div,{initial:{opacity:.75,translateX:"50%"},animate:{opacity:1,translateX:0},exit:{translateX:"100%",opacity:.6},className:W$,children:y.jsx(_n,{label:"View has no notations",color:"orange",...l,children:y.jsx($a,{size:"lg",variant:"light",color:"orange",radius:"md",children:y.jsx(tee,{})})})},"empty"),i&&o&&y.jsx(pi.div,{initial:{opacity:.75,translateX:"50%"},animate:{opacity:1,translateX:0},exit:{translateX:"100%",opacity:.6},className:W$,children:y.jsx(_n,{label:"Show notation",color:"dark",fz:"xs",...l,children:y.jsx(lr,{size:"lg",variant:"default",color:"gray",className:UYe,onClick:()=>a(!1),children:y.jsx(KYe,{stroke:1.5})})})},"collapsed"),i&&!o&&y.jsx(pi.div,{initial:{opacity:.75,scale:.2},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.25},className:Ge("react-flow__panel",W$),style:{transformOrigin:"bottom right"},children:y.jsx($f,{radius:"sm",withBorder:!0,shadow:"lg",className:WYe,children:y.jsxs(op,{defaultValue:"first",radius:"xs",children:[y.jsxs(py,{children:[y.jsx(lr,{size:"md",variant:"subtle",color:"gray",ml:2,style:{alignSelf:"center"},onClick:()=>a(!0),children:y.jsx(JYe,{stroke:2})}),y.jsx(Mf,{value:"first",fz:"xs",children:"Elements"}),y.jsx(Mf,{value:"second",fz:"xs",disabled:!0,children:"Relationships"})]}),y.jsx(Js,{value:"first",className:GYe,hidden:o,children:y.jsx(ta,{viewportProps:{style:{maxHeight:`min(40vh, ${Math.max(e-60,50)}px)`}},children:y.jsx(Io,{gap:0,children:n.map((s,c)=>y.jsx(eXe,{value:s},c))})})})]})})},r)]})}),nXe=S.memo(()=>{const[{layout:e,isActive:r},{toggleCompare:n}]=H$(),o=e==="manual"?"var(--mantine-color-orange-6)":"var(--mantine-color-green-6)";return y.jsx(hr,{className:qn({position:"absolute",top:"0",left:"0",width:"full",height:"full",border:"default",borderWidth:4,pointerEvents:"none",alignItems:"flex-start",justifyContent:"center"}),style:{zIndex:"9999",display:r?void 0:"none",borderColor:o},children:y.jsx(oXe,{style:{backgroundColor:o},onClick:a=>{a.stopPropagation(),n()},children:"Close compare"})})}),oXe=pr.withProps({className:fe({fontSize:"xs",fontWeight:"medium",py:"1.5",lineHeight:"1",borderBottomLeftRadius:"sm",borderBottomRightRadius:"sm",transform:"translateY(-4px)",px:"4",color:"mantine.colors.gray[
2025-12-16 12:13:34 +01:00
${l} {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
--likec4-palette-fill: ${i(n.elements.fill)};
--likec4-palette-stroke: ${i(n.elements.stroke)};
}
${Tte} ${l} {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
--likec4-palette-fill: ${a(n.elements.fill)};
--likec4-palette-stroke: ${a(n.elements.stroke)};
}
2025-12-16 12:13:34 +01:00
`.trim()};function $Ke(e,r,n){const{elements:o,relationships:a}=n,i=`:where(${e} [data-likec4-color=${r}])`;return[`
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
${i} {
--likec4-palette-fill: ${o.fill};
--likec4-palette-stroke: ${o.stroke};
--likec4-palette-hiContrast: ${o.hiContrast};
--likec4-palette-loContrast: ${o.loContrast};
--likec4-palette-relation-stroke: ${a.line};
--likec4-palette-relation-label: ${a.label};
--likec4-palette-relation-label-bg: ${a.labelBg};
2025-12-16 12:13:34 +01:00
--likec4-palette-relation-stroke-selected: ${$te(zte(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
}
${Tte} ${i} {
2025-12-16 12:13:34 +01:00
--likec4-palette-relation-stroke-selected: ${$te(zte(a.line,"white",70))};
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
}
2025-12-16 12:13:34 +01:00
`.trim(),...RCe(1,EKe+1).map(l=>CKe(e,r,n,l))].join(`
`)}function zKe(e,r){return Jr(r.colors,Wx(),un(([n,o])=>$Ke(e,n,o)),VV(`
`))}const RKe=S.memo(({id:e})=>{const r=`#${e}`,n=Zu()?.(),{theme:o}=Ree(),a=zKe(r,o);return y.jsx("style",{type:"text/css","data-likec4-colors":e,dangerouslySetInnerHTML:{__html:a},nonce:n})}),TKe='@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:400;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-400-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-400-normal.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:500;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-500-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-500-normal.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:600;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-600-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-600-normal.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:400;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-400-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-400-normal.woff) format("woff");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:500;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-500-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-500-normal.woff) format("woff");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:600;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-600-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-600-normal.woff) format("woff");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:400;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-ext-400-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-ext-400-normal.woff) format("woff");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:500;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-ext-500-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-ext-500-normal.woff) format("woff");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:600;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-ext-600-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-ext-600-normal.woff) format("woff");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:400;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@la
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)},GKe=function(e,r){return qKe(e)||HKe(e,r)||UKe(e,r)||WKe()},qte=Fte((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})),YKe=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},Hte=function(e,r){if(e==null)return{};var n,o,a=YKe(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},XKe=S.createContext(null);function Ute(e){var r=e.children,n=r===void 0?"":r,o=Hte(e,["children"]);return typeof n!="string"&&(n=PKe()),Kr.createElement("template",qte({},o,{dangerouslySetInnerHTML:{__html:n}}))}function Wte(e){var r=e.root,n=e.children;return Ii.createPortal(n===void 0?null:n,r)}function ZKe(e){var r=S.forwardRef((function(n,o){var a,i,l=n.mode,s=l===void 0?"open":l,c=n.delegatesFocus,d=c!==void 0&&c,u=n.styleSheets,p=u===void 0?[]:u,f=n.ssr,g=f!==void 0&&f,v=n.children,w=Hte(n,["mode","delegatesFocus","styleSheets","ssr","children"]),x=(i=S.useRef((a=o)&&a.current),S.useEffect((function(){a&&(a.current=i.current)}),[a]),i),k=S.useState(null),C=GKe(k,2),_=C[0],$=C[1],z="node_".concat(s).concat(d);return S.useLayoutEffect((function(){if(x.current)try{if(typeof o=="function"&&o(x.current),g){var T=x.current.shadowRoot;return void $(T)}var A=x.current.attachShadow({mode:s,delegatesFocus:d});p.length>0&&(A.adoptedStyleSheets=p),$(A)}catch(R){(function(j){var O=j.error,P=j.styleSheets,L=j.root;switch(O.name){case"NotSupportedError":P.length>0&&(L.adoptedStyleSheets=P);break;default:throw O}})({error:R,styleSheets:p,root:_})}}),[o,x,p]),Kr.createElement(Kr.Fragment,null,Kr.createElement(e.tag,qte({key:z,ref:x},w),(_||g)&&Kr.createElement(XKe.Provider,{value:_},g?Kr.createElement(Ute,{shadowroot:s,shadowrootmode:s},e.render({root:_,ssr:g,children:v})):Kr.createElement(Wte,{root:_},e.render({root:_,ssr:g,children:v})))))}));return r.propTypes={mode:hl.oneOf(["open","closed"]),delegatesFocus:hl.bool,styleSheets:hl.arrayOf(hl.instanceOf(globalThis.CSSStyleSheet)),ssr:hl.bool,children:hl.node},r}Ute.propTypes={children:hl.oneOfType([hl.string,hl.node])},Wte.propTypes={root:hl.object.isRequired,children:hl.node};var Nz=new Map;function KKe(){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=VKe(a,{separator:"-"}),l="".concat(r,"-").concat(i);return Nz.has(l)||Nz.set(l,ZKe({tag:i,render:n})),Nz.get(l)}})}var QKe=KKe();const JKe=QKe.div;function eQe(e,r=!1){if(r===!1)return`
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
:where([data-likec4-instance="${e}"]) {
display: block;
box-sizing: border-box;
border: 0 solid transparent;
background: transparent;
padding: 0;
margin: 0;
overflow: hidden;
width: 100%;
height: 100%;
min-width: 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()}const Gte=S.forwardRef(({children:e,theme:r=Ate,injectFontCss:n=!0,styleNonce:o,colorScheme:a,keepAspectRatio:i=!1,...l},s)=>{const c=AKe(a),d=NW(),u=eQe(d,i),p=S.useRef(null),f=jKe(n,o),g=S.useCallback(()=>p.current??void 0,[p]),v=it(()=>{if(Ja(o)){if(typeof o=="string")return o;if(typeof o=="function")return o()}return""});let w=Ja(o)?v():void 0;return y.jsxs(y.Fragment,{children:[y.jsx("style",{type:"text/css",nonce:w,dangerouslySetInnerHTML:{__html:u}}),y.jsx(JKe,{ssr:!1,...l,styleSheets:f,"data-likec4-instance":d,children:y.jsx("div",{ref:$r(p,s),"data-mantine-color-scheme":c,className:"likec4-shadow-root",children:y.jsx(q7,{...a&&{forceColorScheme:a},defaultColorScheme:c,getRootElement:g,...!!w&&{getStyleNonce:v},cssVariablesSelector:".likec4-shadow-root",theme:r,children:y.jsx(Tz,{children:e})})})})]})});Gte.displayName="ShadowRoot";const tQe=fe({cursor:"pointer","--mantine-cursor-pointer":"pointer","& :where(.likec4-diagram, .likec4-compound-node, .likec4-element-node)":{cursor:"pointer"}});function rQe({viewId:e,className:r,pannable:n=!1,zoomable:o=!1,keepAspectRatio:a=!0,colorScheme:i,injectFontCss:l=!0,controls:s=!1,background:c="transparent",browser:d=!0,showNavigationButtons:u=!1,enableNotations:p,enableFocusMode:f=!1,enableDynamicViewWalkthrough:g=!1,enableElementDetails:v=!1,enableRelationshipDetails:w=!1,enableRelationshipBrowser:x=w,reduceGraphics:k="auto",mantineTheme:C,styleNonce:_,style:$,reactFlowProps:z,renderNodes:T,children:A,...R}){const j=S.useRef(null),O=oNe(),[P,L]=S.useState("manual"),[H,N]=S.useState(null),V=it(Q=>{Q&&Q!==H&&L("manual"),N(Q)}),B=it(()=>{V(e)});if(!O)return y.jsx(jz,{children:"LikeC4Model not found. Make sure you provided LikeC4ModelProvider."});const F=O.findView(e)?.$layouted;if(!F)return y.jsx(MKe,{viewId:e});if(F._stage!=="layouted")return y.jsxs(jz,{children:['LikeC4 View "$',e,'" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.']});const q=H?O.findView(H):null,G=P==="manual"?q?.$layouted:q?.$view,U=!!p&&(F.notation?.nodes?.length??0)>0,Y=(G?.notation?.nodes?.length??0)>0,Z=d!==!1,I=OV(d)?{}:d,W=wJ(F,R.dynamicViewVariant),K=j.current?{root:j.current}:void 0;return y.jsx(Gte,{ref:j,injectFontCss:l,theme:C,colorScheme:i,styleNonce:_,keepAspectRatio:a?W:!1,className:Ge("likec4-view",r),style:$,children:y.jsxs(Tz,{children:[y.jsx(Mte,{view:F,pannable:n,zoomable:o,background:c,fitView:!0,fitViewPadding:K3.default,enableNotations:U,enableDynamicViewWalkthrough:g,showNavigationButtons:u,enableCompareWithLatest:!1,enableFocusMode:f,enableRelationshipDetails:w,enableElementDetails:v,enableRelationshipBrowser:x,enableElementTags:!1,controls:s,reduceGraphics:k,className:Ge("likec4-static-view",Z&&tQe),enableSearch:!1,...Z&&{onCanvasClick:B,onNodeClick:B},reactFlowProps:z,renderNodes:T,children:A,...R}),y.jsx(Cn,{...K,children:G&&y.jsxs(n0,{openDelay:0,onClose:()=>V(null),children:[y.jsx(Mte,{view:G,pannable:!0,zoomable:!0,background:"dots",onNavigateTo:V,showNavigationButtons:!0,enableDynamicViewWalkthrough:!0,enableFocusMode:!0,enableRelationshipBrowser:!0,enableElementDetails:!0,enableRelationshipDetails:!0,enableSearch:!0,enableElementTags:!0,enableCompareWithLatest:!0,controls:!0,fitView:!0,...R,fitViewPadding:K3.withControls,...I,enableNotations:Y&&(I.enableNotations??!0),renderNodes:T,onLayoutTypeChange:L}),y.jsx(hr,{pos:"absolute",top:"4",right:"4",zIndex:"999",children:y.jsx(lr,{variant:"default",color:"gray",onClick:Q=>{Q.stopPropagation(),V(null)},children:y.jsx(lp,{})})})]})})]})})}var nQe=e=>y.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMidYMid",viewBox:"0 0 512 131",...e,children:y.jsx("path",{fill:"#2396ED",d:"m140.598 25.715 3.892 2.818c6.77 5.46 10.662 11.625 11.508 18.67 7.277-1.409 16.584-.352 20.646 2.466l3.723 2.29-.677 1.41c-1.185 2.641-1.523 3.346-1.692 3.698-6.6 13.21-19.631 13.386-25.723 13.21-15.4 38.573-48.23 59.885-92.57 59.885-20.476 0-36.045-6.517-46.538-19.375C-.709 93.88-.709 71.862.475 64.817l.339-1.41h122.353c6.43 0 11.339-1.76 13.708-3.17-2.539-3.875-3.385-8.278-3.554-10.744-.508-7.045 1
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
addressing a growing number of use cases. It centrally stores your data so you can
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.garm":{style:{opacity:20,icon:"tech:docker"},title:"Garm Image",kind:"container",id:"edp.garm"},"edp.grafana":{style:{opacity:20,icon:"tech:grafana"},description:{txt:"Data visualization and monitoring"},title:"Grafana",kind:"container",id:"edp.grafana"},"edp.ingressNginx":{style:{opacity:20},tags:["internal"],description:{txt:"Ingress Controller for incoming http(s) traffic"},title:"Ingress",kind:"container",id:"edp.ingressNginx"},"edp.keycloak":{style:{opacity:20},description:{txt:"Single Sign On for all EDP products"},title:"Keycloak",kind:"container",id:"edp.keycloak"},"edp.kyverno":{style:{opacity:20},tags:["internal"],description:{txt:"Policy-as-Code"},title:"Kyverno",kind:"container",id:"edp.kyverno"},"edp.loki":{style:{opacity:20},description:{txt:"Log aggregation system"},title:"Loki",kind:"container",id:"edp.loki"},"edp.mailhog":{style:{opacity:20},description:{txt:"Web and API based SMTP testing"},title:"Mailhog",kind:"container",id:"edp.mailhog"},"edp.minio":{style:{opacity:20},description:{txt:"S3 compatible blob storage"},title:"Minio",kind:"container",id:"edp.minio"},"edp.monitoring":{style:{opacity:20},description:{txt:"Observability system to monitor deployed components"},title:"Monitoring",kind:"container",id:"edp.monitoring"},"edp.openbao":{style:{opacity:20},description:{txt:"Secure secret storage"},title:"OpenBao",kind:"container",id:"edp.openbao"},"edp.prometheus":{style:{opacity:20,icon:"tech:prometheus"},description:{txt:"Monitoring and alerting toolkit"},title:"Prometheus",kind:"container",id:"edp.prometheus"},"edp.spark":{style:{opacity:20},tags:["internal"],description:{txt:"Allows running Spark applications on K8s"},title:"Spark",kind:"container",id:"edp.spark"},"edp.velero":{style:{opacity:20},tags:["internal"],description:{txt:"Backup Kubernetes resources"},title:"Velero",kind:"container",id:"edp.velero"},"cloud.application":{style:{color:"primary"},technology:"DSL",description:{txt:"An application description"},title:"application",kind:"schema",id:"cloud.application"},"edp.application":{style:{color:"primary"},technology:"DSL",description:{txt:"An application description"},title:"application",kind:"schema",id:"edp.application"},"edp.testApp":{style:{opacity:20},description:{txt:"Testapp to validate deployments"},title:"Fibonacci",kind:"container",id:"edp.testApp"},"localbox.application":{style:{color:"primary"},technology:"DSL",description:{txt:"An application description"},title:"application",kind:"schema",id:"localbox.application"},"localbox.git":{style:{icon:"tech:git"},technology:"Git",description:{txt:"local git"},title:"git",kind:"component",id:"localbox.git"},"edfbuilder_workflow.runEDP.createCrossplaneNS":{style:{},title:"Create Crossplane namespace",kind:"step",id:"edfbuilder_workflow.runEDP.createCrossplaneNS"},"edfbuilder_workflow.runEDP.installCrossplaneHelm":{style:{},title:"Install Crossplane Helm Chart",kind:"step",id:"edfbuilder_workflow.runEDP.installCrossplaneHelm"},"edfbuilder_workflow.runEDP.installCrossplaneFunctionsAndProviders":{style:{},title:"Install Crossplane Functions and Providers",kind:"step",id:"edfbuilder_workflow.runEDP.installCrossplaneFunctionsAndProviders"},"edfbuilder_workflow.runEDP.waitForCrossplaneFunctionsAndProviders":{style:{},title:"Wait for Crossplane Functions and Providers to become available",kind:"step",id:"edfbuilder_workflow.runEDP.waitForCrossplaneFunctionsAndProviders"},"edfbuilder_workflow.runEDP.setupCrossplaneServiceAccount":{style:{},title:"Apply cluster-admin role to crossplane shell p
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
A tenant is a folder in Foundry-Config-Forgejo. On merge triggers reconciliation to EDP.
Optionally we will have a WebUI/API/CLI`},tags:[],style:{opacity:15,size:"md"},depth:1,x:3577,y:79,width:870,height:995,labelBBox:{x:6,y:0,width:280,height:15}},{id:"otcTenantProd",parent:null,level:0,children:["otcTenantProd.otcTenantEdpBuildthing","otcTenantProd.otcTenantObservability","otcTenantProd.otcTenantCustomerA"],inEdges:[],outEdges:["1ypat9q","1oiku86"],deploymentRef:"otcTenantProd",title:"Prod - builth.ing",kind:"environment",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:17522,y:79,width:870,height:648,labelBBox:{x:6,y:0,width:108,height:15}},{id:"local",parent:null,level:0,children:["local.ingressNginx","local.velero","local.crossplane","local.externalSecrets","local.monitoring","local.backstage","local.argocd","local.keycloak","local.openbao","local.fibonacci","local.mailhog","local.minio","local.gitea","local.spark.sparkoperator"],inEdges:["1m1lj8s"],outEdges:["se5brg"],deploymentRef:"local",title:"Local kind-cluster",kind:"environment",technology:"Kind",color:"primary",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"Local kind-cluster environment for EDP, typically run by edpbuilder"},tags:[],style:{opacity:15,size:"md"},depth:2,x:6508,y:8,width:10964,height:1449,labelBBox:{x:6,y:0,width:127,height:15}},{id:"local.ingressNginx",parent:"local",level:1,children:["local.ingressNginx.ingressNginx"],inEdges:[],outEdges:["15juth8","p2br4p","o229dq","2vnvvg","4ix58c","1hr2s5j","1nksp5g","m2japo","4drflo","ihlgsc"],deploymentRef:"local.ingressNginx",title:"ingress-nginx",kind:"namespace",color:"primary",shape:"rectangle",modelRef:"edp.ingressNginx.ingressNginx",icon:"tech:nginx",tags:[],style:{opacity:15,size:"md"},depth:1,x:10434,y:444,width:384,height:265,labelBBox:{x:6,y:0,width:92,height:15}},{id:"local.velero",parent:"local",level:1,children:["local.velero.velero"],inEdges:[],outEdges:["3znaik"],deploymentRef:"local.velero",title:"Velero",kind:"namespace",color:"primary",shape:"rectangle",modelRef:"edp.velero.velero",tags:[],style:{opacity:15,size:"md"},depth:1,x:12058,y:444,width:384,height:265,labelBBox:{x:6,y:0,width:49,height:15}},{id:"edgeSdk",parent:null,level:0,children:[],inEdges:["1xqlhup"],outEdges:["14pfq5a","lw6otg"],deploymentRef:"edgeSdk",title:"Edge Cloud SDK",kind:"paas",technology:"Cloud Services",color:"primary",shape:"rectangle",icon:"tech:go",description:{txt:"Wrapper around API"},tags:[],style:{opacity:15,size:"md"},x:731,y:497,width:320,height:180,labelBBox:{x:68,y:54,width:214,height:67}},{id:"otc-edpFoundry.forgejoRunnerInfrastructure",parent:"otc-edpFoundry",level:1,children:[],inEdges:["l1c2z3"],outEdges:["109g3jm","1lrp92n"],deploymentRef:"otc-edpFoundry.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"primary",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},x:4055,y:150,width:342,height:180,labelBBox:{x:18,y:54,width:306,height:66}},{id:"otcTenantProd.otcTenantEdpBuildthing",parent:"otcTenantProd",level:1,children:[],inEdges:[],outEdges:["rj56uy","u7ohgi","1ypat9q","1oiku86"],deploymentRef:"otcTenantProd.otcTenantEdpBuildthing",title:"edp.builth.ing",kind:"cluster",color:"primary",shape:"rectangle",icon:"tech:git",description:{txt:"Primary Instance"},tags:[],style:{opacity:15,size:"md"},x:18022,y:150,width:320,height:180,labelBBox:{x:85,y:63,width:181,height:48}},{id:"local.crossplane",parent:"local",level:1,children:["local.crossplane.crossplane","local.crossplane.crossplaneFunction","local.crossplane.crossplaneRbacManager","local.crossplane.providerArgoCD","local.crossplane.providerKind","local.crossplane.providerShell"],inEdges:[],outEdges:[],deploymentRef:"local.crossplane",title:"crossplane-system",kind:"namespace",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:12982,y:79,width:2670,height:301,labelBBox:{x:6,y:0,width:129,height:15}},{id:"local.crossplane.crossplane",parent:"local.crossplane",level:2,children:[],inEdges:[],outEdges:[]
2025-12-18 09:21:05 +01:00
This is kubernetes clusters and other infrastructure like nodes and vms, and platform services. All is set up by IaC-pipelines in the Foundry.`},tags:[],style:{opacity:15,size:"md"},depth:1,x:2913,y:79,width:442,height:1704,labelBBox:{x:6,y:0,width:181,height:15}},{id:"local.backstage.database",parent:"local.backstage",level:2,children:[],inEdges:["19kg5y"],outEdges:[],kind:"instance",title:"Database",technology:"Postgresql",tags:[],icon:"tech:postgresql",color:"primary",shape:"storage",style:{opacity:15,size:"md"},deploymentRef:"local.backstage.database",modelRef:"edp.ui.database",x:8448,y:1177,width:320,height:180,labelBBox:{x:101,y:64,width:148,height:46}},{id:"local.argocd.argocdRedis",parent:"local.argocd",level:2,children:[],inEdges:["1gfgfhk","qfu5xm","g7xnzs","fon3rk"],outEdges:[],kind:"instance",title:"Redis",technology:"Redis",tags:[],icon:"tech:redis",color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.argocd.argocdRedis",modelRef:"edp.argoCD.argocdRedis",x:10043,y:1177,width:320,height:180,labelBBox:{x:119,y:64,width:113,height:46}},{id:"local.keycloak.keycloakDB",parent:"local.keycloak",level:2,children:[],inEdges:["4zwy1m"],outEdges:[],kind:"instance",title:"Database",technology:"Postgresql",tags:[],icon:"tech:postgresql",color:"primary",shape:"storage",style:{opacity:15,size:"md"},deploymentRef:"local.keycloak.keycloakDB",modelRef:"edp.keycloak.keycloakDB",x:10738,y:1177,width:320,height:180,labelBBox:{x:101,y:64,width:148,height:46}},{id:"local.monitoring.distributor",parent:"local.monitoring",level:2,children:[],inEdges:["sb2j38"],outEdges:[],kind:"instance",title:"Distributor",tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.monitoring.distributor",modelRef:"edp.monitoring.loki.distributor",x:7528,y:1177,width:320,height:180,labelBBox:{x:112,y:74,width:95,height:24}},{id:"otc-edp-per-tenant.forgejoRunnerInfrastructure",parent:"otc-edp-per-tenant",level:1,children:[],inEdges:["126mt75"],outEdges:["fkkf8y","1mbuxdd"],deploymentRef:"otc-edp-per-tenant.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"primary",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},x:2963,y:150,width:342,height:180,labelBBox:{x:18,y:54,width:306,height:66}},{id:"otc-edp-per-tenant.cce",parent:"otc-edp-per-tenant",level:1,children:[],inEdges:["fkkf8y","r3wxut","1sng0q0","p2umm7"],outEdges:["pit45i","b27cdb"],deploymentRef:"otc-edp-per-tenant.cce",title:"OTC CCE",kind:"kubernetes",technology:"Kubernetes",color:"primary",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"OTC Container Cluster Engine"},tags:[],style:{opacity:15,size:"md"},x:2977,y:1177,width:327,height:180,labelBBox:{x:46,y:53,width:266,height:68}},{id:"otc-edp-per-tenant.cloudServices",parent:"otc-edp-per-tenant",level:1,children:[],inEdges:["pit45i","e3benz"],outEdges:[],deploymentRef:"otc-edp-per-tenant.cloudServices",title:"EDP Cloud Services",kind:"paas",technology:"Cloud Services",color:"primary",shape:"rectangle",description:{txt:"EDP Cloud Services"},tags:[],style:{opacity:15,size:"md"},x:2963,y:1553,width:320,height:180,labelBBox:{x:67,y:53,width:185,height:67}},{id:"otcKubernetes",parent:null,level:0,children:["otcKubernetes.edpCluster"],inEdges:["1ogkmfn","b27cdb","1mbuxdd","9r557q","rivecr","1lrp92n","se5brg"],outEdges:["i6v3n","p2umm7","126mt75","c2grk6","1ean8sr","l1c2z3","1m1lj8s"],deploymentRef:"otcKubernetes",title:"OTC Kubernetes",kind:"environment",technology:"Kubernetes",color:"primary",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"OTC Container Cluster Engine hosting EDP platform"},tags:[],style:{opacity:15,size:"md"},depth:1,x:4224,y:1500,width:384,height:265,labelBBox:{x:6,y:0,width:106,height:15}},{id:"otcKubernetes.edpCluster",parent:"otcKubernetes",level:1,children:[],inEdges:["1ogkmfn","b27cdb","1mbuxdd","9r557q","rivecr","1lrp92n","se5brg"],outEdges:["i6v3n","p2umm7","126mt75","c2g
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
offering capabilities like
code version controling
collaboration and ticketing
and security scanning`},technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"local.gitea.forgejo",modelRef:"edp.forgejo",navigateTo:"forgejo",x:12542,y:844,width:340,height:180,labelBBox:{x:46,y:18,width:278,height:139}},{id:"local.gitea.forgejoRunner",parent:"local.gitea",level:2,children:[],inEdges:["1m1lj8s"],outEdges:["se5brg"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.gitea.forgejoRunner",modelRef:"forgejoRunner",x:12542,y:150,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:102}},{id:"local.spark.sparkoperator",parent:"local",level:1,children:[],inEdges:[],outEdges:[],kind:"instance",title:"Spark Operator",technology:"Spark",tags:[],icon:"tech:spark",color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.spark.sparkoperator",modelRef:"edp.spark.sparkoperator",x:17102,y:150,width:320,height:180,labelBBox:{x:76,y:65,width:198,height:45}}],edges:[{id:"1xqlhup",source:"edgeProvider",target:"edgeSdk",label:"built using",points:[[1035,330],[1021,352],[1007,374],[995,395],[977,425],[959,458],[943,489]],labelBBox:{x:996,y:395,width:67,height:18},parent:null,relations:["1wlvsb5"],color:"gray",line:"dashed",head:"normal"},{id:"u9omtf",source:"edgeProvider",target:"edgeProviderHost.edp",label:"hosted on",points:[[1264,255],[1378,274],[1522,320],[1596,426],[1673,536],[1652,606],[1596,727],[1576,770],[1543,808],[1507,838]],labelBBox:{x:1647,y:576,width:66,height:18},parent:null,relations:["12ssq9"],color:"gray",line:"dashed",head:"normal"},{id:"r4j4sg",source:"edgeProvider",target:"edgeProviderHost.terralist",label:"published to",points:[[1160,330],[1197,379],[1244,439],[1282,489]],labelBBox:{x:1225,y:395,width:80,height:18},parent:null,relations:["1mpjz5d"],color:"gray",line:"dashed",head:"normal"},{id:"14pfq5a",source:"edgeSdk",target:"edgeProviderHost.edp",label:"hosted on",points:[[1011,677],[1077,727],[1160,788],[1228,838]],labelBBox:{x:1125,y:742,width:66,height:18},parent:null,relations:["1sm6ifh"],color:"gray",line:"dashed",head:"normal"},{id:"lw6otg",source:"edgeSdk",target:"edgeCloud.edgeApi",label:"calls",points:[[884,677],[880,725],[875,785],[871,834]],labelBBox:{x:879,y:742,width:32,height:18},parent:null,relations:["vfhcba"],color:"gray",line:"dashed",head:"normal"},{id:"1ogkmfn",source:"edgeConnectEnv",target:"otcKubernetes.edpCluster",label:"[...]",points:[[5676,330],[5725,397],[5779,491],[5779,586],[5779,586],[5779,586],[5779,1268],[5779,1420],[5657,1426],[5518,1488],[5355,1561],[4853,1609],[4586,1630]],labelBBox:{x:5780,y:922,width:25,height:18},parent:null,relations:["18dtot7","1k6h7jf"],color:"gray",line:"dashed",head:"normal"},{id:"i6v3n",source:"otcKubernetes.edpCluster",target:"edgeConnectEnv",label:"runs workflows",points:[[4576,1629],[4742,1611],[5004,1565],[5205,1457],[5317,1397],[5420,1395],[5420,1268],[5420,586],[5420,586],[5420,586],[5420,495],[5470,404],[5517,338]],labelBBox:{x:5421,y:923,width:97,height:18},parent:null,relations:["1pbc22f"],color:"gray",line:"dashed",head:"normal"},{id:"pit45i",source:"otc-edp-per-tenant.cce",target:"otc-edp-per-tenant.cloudServices",label:null,points:[[3134,1357],[3132,1391],[3130,1430],[3128,1465],[3127,1490],[3126,1518],[3125,1543]],labelBBox:null,parent:"otc-edp-per-tenant",relations:["1fzhjm9","15njmlz","hks76r","1w18ve8"],color:"gray",line:"dashed",head:"normal"},{id:"b27cdb",source:"otc-edp-per-tenant.cce",target:"otcKubernetes.edpCluster",label:"register",points:[[3155,1357],[3167,1404],[3190,1457],[3232,1488],[3246,1498],[3370,1498],[3387,1500],[3691,1532],[4043,1584],[4246,1615]],labelBBox:{x:3233,y:1465,width:51,height:18},parent:null,relations:["18dtot7"],color:"gray",line:"dashed",head:"normal"},{id:"fkkf8y",source:"otc-edp-per-tenant.forgejoRunnerInfrastructure",target:"otc-edp-per-tenant.cce",label:"
2025-12-16 12:13:34 +01:00
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
This is kubernetes clusters and other infrastructure like nodes and vms, and platform services. All is set up by IaC-pipelines in the Foundry.`},tags:[],style:{opacity:15,size:"md"},depth:3,x:8,y:8,width:1994,height:1159,labelBBox:{x:6,y:0,width:181,height:15}},{id:"otc-edp-per-tenant.forgejoRunnerInfrastructure",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner"],inEdges:[],outEdges:["1dcszi5"],deploymentRef:"otc-edp-per-tenant.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"primary",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},depth:1,x:321,y:150,width:384,height:266,labelBBox:{x:6,y:0,width:235,height:15}},{id:"otc-edp-per-tenant.cce",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.cce.edp"],inEdges:["1dcszi5"],outEdges:["8msu1q","120qe5o","ealiax","1trj5u6"],deploymentRef:"otc-edp-per-tenant.cce",title:"OTC CCE",kind:"kubernetes",technology:"Kubernetes",color:"red",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"OTC Container Cluster Engine"},tags:[],style:{opacity:15,size:"md"},depth:2,x:755,y:79,width:954,height:719,labelBBox:{x:6,y:0,width:54,height:15}},{id:"otc-edp-per-tenant.cce.edp",parent:"otc-edp-per-tenant.cce",level:2,children:["otc-edp-per-tenant.cce.edp.externalSecrets","otc-edp-per-tenant.cce.edp.ingressNginx","otc-edp-per-tenant.cce.edp.argoCD","otc-edp-per-tenant.cce.edp.forgejo"],inEdges:["1dcszi5"],outEdges:["8msu1q","120qe5o","ealiax","1trj5u6"],deploymentRef:"otc-edp-per-tenant.cce.edp",title:"EDP",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:787,y:132,width:890,height:634,labelBBox:{x:6,y:0,width:27,height:15}},{id:"otc-edp-per-tenant.cce.edp.externalSecrets",parent:"otc-edp-per-tenant.cce.edp",level:3,children:[],inEdges:[],outEdges:[],kind:"instance",title:"external-secrets",description:{txt:"Provider to access externally stored Kubernetes secrets"},tags:["internal"],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.externalSecrets",modelRef:"edp.externalSecrets",navigateTo:"externalSecrets",x:837,y:204,width:320,height:180,labelBBox:{x:39,y:54,width:242,height:65}},{id:"otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner",parent:"otc-edp-per-tenant.forgejoRunnerInfrastructure",level:2,children:[],inEdges:[],outEdges:["1dcszi5"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:353,y:204,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edp-per-tenant.cce.edp.ingressNginx",parent:"otc-edp-per-tenant.cce.edp",level:3,children:[],inEdges:[],outEdges:["1ir70dd","1kr1wg1"],kind:"instance",title:"Ingress",description:{txt:"Ingress Controller for incoming http(s) traffic"},tags:["internal"],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.ingressNginx",modelRef:"edp.ingressNginx",navigateTo:"ingressNginx",x:1287,y:204,width:320,height:180,labelBBox:{x:33,y:54,width:255,height:65}},{id:"otc-edp-per-tenant.cce.edp.argoCD",parent:"otc-edp-per-tenant.cce.edp",level:3,children:[],inEdges:["1ir70dd"],outEdges:[],kind:"instance",title:"ArgoCD",description:{txt:"GitOps Service"},tags:[],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.argoCD",modelRef:"edp.argoCD",navigateTo:"argoCD",x:1307,y:536,width:320,height:180,labelBBox:{x:108,y:63,width:105,height:48}},{id:"otc-edp-per-tenant.cce.edp.forgejo",parent:"otc-edp-per-tenant.cce.edp",level:3,children:[],inEdges:["1kr1wg1","1dcszi5"],outE
offering capabilities like
code version controling
collaboration and ticketing
and security scanning`},technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.forgejo",modelRef:"edp.forgejo",navigateTo:"forgejo",x:837,y:536,width:340,height:180,labelBBox:{x:46,y:18,width:278,height:139}},{id:"otc-edp-per-tenant.cloudServices",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.cloudServices.postgres","otc-edp-per-tenant.cloudServices.redis","otc-edp-per-tenant.cloudServices.objectstorage","otc-edp-per-tenant.cloudServices.elasticsearch"],inEdges:["8msu1q","120qe5o","ealiax","1trj5u6"],outEdges:[],deploymentRef:"otc-edp-per-tenant.cloudServices",title:"EDP Cloud Services",kind:"paas",technology:"Cloud Services",color:"primary",shape:"rectangle",description:{txt:"EDP Cloud Services"},tags:[],style:{opacity:15,size:"md"},depth:1,x:58,y:815,width:1894,height:302,labelBBox:{x:6,y:0,width:127,height:15}},{id:"otc-edp-per-tenant.cloudServices.postgres",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["8msu1q"],outEdges:[],kind:"instance",title:"PostgreSQL",description:{txt:`PostgreSQL is a powerful, open source object-relational database system.
It has more than 15 years of active development and a proven architecture
that has earned it a strong reputation for reliability, data integrity,
and correctness.`},technology:"PostgreSQL",tags:[],icon:"tech:postgresql",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.postgres",modelRef:"postgres",x:108,y:887,width:354,height:180,labelBBox:{x:46,y:17,width:292,height:139}},{id:"otc-edp-per-tenant.cloudServices.redis",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["120qe5o"],outEdges:[],kind:"instance",title:"Redis",description:{txt:"Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker."},technology:"Redis",tags:[],icon:"tech:redis",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.redis",modelRef:"redis",x:592,y:887,width:359,height:180,labelBBox:{x:47,y:26,width:297,height:121}},{id:"otc-edp-per-tenant.cloudServices.objectstorage",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["ealiax"],outEdges:[],kind:"instance",title:"s3 Object Storage",description:{txt:"s3 Object Storage"},technology:"S3 Object Storage",tags:[],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.objectstorage",modelRef:"objectstorage",x:1082,y:887,width:320,height:180,labelBBox:{x:78,y:53,width:164,height:67}},{id:"otc-edp-per-tenant.cloudServices.elasticsearch",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["1trj5u6"],outEdges:[],kind:"instance",title:"Elasticsearch",description:{txt:`Elasticsearch is a distributed, RESTful search and analytics engine capable of
addressing a growing number of use cases. It centrally stores your data so you can
2025-12-16 12:13:34 +01:00
discover the expected and uncover the unexpected.`},technology:"Elasticsearch",tags:[],icon:"tech:elasticsearch",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.elasticsearch",modelRef:"elasticsearch",x:1532,y:887,width:370,height:180,labelBBox:{x:46,y:17,width:308,height:139}}],edges:[{id:"1ir70dd",source:"otc-edp-per-tenant.cce.edp.ingressNginx",target:"otc-edp-per-tenant.cce.edp.argoCD",label:"https",points:[[1452,383],[1455,427],[1458,481],[1461,526]],labelBBox:{x:1459,y:448,width:34,height:18},parent:"otc-edp-per-tenant.cce.edp",relations:["1yssos5"],color:"gray",line:"dashed",head:"normal"},{id:"1kr1wg1",source:"otc-edp-per-tenant.cce.edp.ingressNginx",target:"otc-edp-per-tenant.cce.edp.forgejo",label:"https",points:[[1329,383],[1268,429],[1195,484],[1133,530]],labelBBox:{x:1241,y:448,width:34,height:18},parent:"otc-edp-per-tenant.cce.edp",relations:["123efwn"],color:"gray",line:"dashed",head:"normal"},{id:"1dcszi5",source:"otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner",target:"otc-edp-per-tenant.cce.edp.forgejo",label:"registers",points:[[646,383],[714,429],[797,485],[866,531]],labelBBox:{x:776,y:448,width:58,height:18},parent:"otc-edp-per-tenant",relations:["g9oj4f"],color:"gray",line:"dashed",head:"normal"},{id:"8msu1q",source:"otc-edp-per-tenant.cce.edp.forgejo",target:"otc-edp-per-tenant.cloudServices.postgres",label:null,points:[[837,684],[743,718],[626,764],[527,815],[490,835],[452,858],[417,881]],labelBBox:null,parent:"otc-edp-per-tenant",relations:["hks76r"],color:"gray",line:"dashed",head:"normal"},{id:"120qe5o",source:"otc-edp-per-tenant.cce.edp.forgejo",target:"otc-edp-per-tenant.cloudServices.redis",label:null,points:[[947,716],[914,766],[872,827],[838,878]],labelBBox:null,parent:"otc-edp-per-tenant",relations:["1w18ve8"],color:"gray",line:"dashed",head:"normal"},{id:"ealiax",source:"otc-edp-per-tenant.cce.edp.forgejo",target:"otc-edp-per-tenant.cloudServices.objectstorage",label:null,points:[[1067,716],[1100,766],[1142,827],[1176,878]],labelBBox:null,parent:"otc-edp-per-tenant",relations:["15njmlz"],color:"gray",line:"dashed",head:"normal"},{id:"1trj5u6",source:"otc-edp-per-tenant.cce.edp.forgejo",target:"otc-edp-per-tenant.cloudServices.elasticsearch",label:null,points:[[1104,716],[1144,748],[1192,780],[1242,798],[1336,833],[1372,784],[1467,815],[1512,830],[1557,855],[1596,881]],labelBBox:null,parent:"otc-edp-per-tenant",relations:["1fzhjm9"],color:"gray",line:"dashed",head:"normal"}]},"edp-foundry-central-service":{_type:"deployment",tags:null,links:null,_stage:"layouted",sourcePath:"views/deployment/otc/foundry.c4",description:null,title:"EDP Foundry Central Service",id:"edp-foundry-central-service",autoLayout:{direction:"TB"},hash:"8f8eb235b0e8ff555a22ed61d124ba68e67e5ee2",bounds:{x:0,y:0,width:3894,height:1218},nodes:[{id:"otc-edpFoundry",parent:null,level:0,children:["otc-edpFoundry.cce","otc-edpFoundry.forgejoRunnerInfrastructure","otc-edpFoundry.workflowSetupEDPInfrastructure","otc-edpFoundry.workflowSetupArgoCDInfrastructure"],inEdges:[],outEdges:[],deploymentRef:"otc-edpFoundry",title:"OTC EDP Foundry Central Service clusters",kind:"cloud",technology:"OTC",color:"slate",shape:"rectangle",description:{txt:`OTC environments for the central EDP Foundry services. This is kubernetes clusters and other infrastructure like nodes and vms, and optionally platform services. All is set up by IaC terraform and edpbuilder.
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
A tenant is a folder in Foundry-Config-Forgejo. On merge triggers reconciliation to EDP.
Optionally we will have a WebUI/API/CLI`},tags:[],style:{opacity:15,size:"md"},depth:3,x:8,y:8,width:3878,height:1202,labelBBox:{x:6,y:0,width:280,height:15}},{id:"otc-edpFoundry.cce",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.cce.internalServices","otc-edpFoundry.cce.centralObservability"],inEdges:["628xl1"],outEdges:["84397w","1oz2va9"],deploymentRef:"otc-edpFoundry.cce",title:"OTC CCE",kind:"kubernetes",technology:"Kubernetes",color:"red",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"OTC Container Cluster Engine"},tags:[],style:{opacity:15,size:"md"},depth:2,x:58,y:79,width:2360,height:755,labelBBox:{x:6,y:0,width:54,height:15}},{id:"otc-edpFoundry.cce.internalServices",parent:"otc-edpFoundry.cce",level:2,children:["otc-edpFoundry.cce.internalServices.externalSecrets","otc-edpFoundry.cce.internalServices.ingressNginx","otc-edpFoundry.cce.internalServices.argoCD","otc-edpFoundry.cce.internalServices.forgejo","otc-edpFoundry.cce.internalServices.openbao"],inEdges:["628xl1"],outEdges:["84397w","1oz2va9"],deploymentRef:"otc-edpFoundry.cce.internalServices",title:"EDP Foundry Internal Services",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:1028,y:150,width:1340,height:634,labelBBox:{x:6,y:0,width:201,height:15}},{id:"otc-edpFoundry.cce.internalServices.externalSecrets",parent:"otc-edpFoundry.cce.internalServices",level:3,children:[],inEdges:[],outEdges:[],kind:"instance",title:"external-secrets",description:{txt:"Provider to access externally stored Kubernetes secrets"},tags:["internal"],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.externalSecrets",modelRef:"edp.externalSecrets",navigateTo:"externalSecrets",x:1308,y:222,width:320,height:180,labelBBox:{x:39,y:54,width:242,height:65}},{id:"otc-edpFoundry.cce.centralObservability",parent:"otc-edpFoundry.cce",level:2,children:["otc-edpFoundry.cce.centralObservability.grafana","otc-edpFoundry.cce.centralObservability.prometheus","otc-edpFoundry.cce.centralObservability.loki"],inEdges:[],outEdges:[],deploymentRef:"otc-edpFoundry.cce.centralObservability",title:"EDP Foundry Central Observability",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:108,y:150,width:870,height:634,labelBBox:{x:6,y:0,width:232,height:15}},{id:"otc-edpFoundry.forgejoRunnerInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner"],inEdges:[],outEdges:["628xl1"],deploymentRef:"otc-edpFoundry.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"green",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},depth:1,x:2468,y:168,width:384,height:266,labelBBox:{x:6,y:0,width:235,height:15}},{id:"otc-edpFoundry.cce.centralObservability.grafana",parent:"otc-edpFoundry.cce.centralObservability",level:3,children:[],inEdges:[],outEdges:["qykxlm","yv49z5"],kind:"instance",title:"Grafana",description:{txt:"Data visualization and monitoring"},tags:[],icon:"tech:grafana",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.centralObservability.grafana",modelRef:"edp.grafana",x:289,y:222,width:345,height:180,labelBBox:{x:47,y:63,width:283,height:47}},{id:"otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner",parent:"otc-edpFoundry.forgejoRunnerInfrastructure",level:2,children:[],inEdges:[],outEdges:["628xl1"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:2500,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edpFoundry.cce.cent
offering capabilities like
code version controling
collaboration and ticketing
2025-12-16 12:13:34 +01:00
and security scanning`},technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.forgejo",modelRef:"edp.forgejo",navigateTo:"forgejo",x:1978,y:554,width:340,height:180,labelBBox:{x:46,y:18,width:278,height:139}},{id:"otc-edpFoundry.cce.internalServices.openbao",parent:"otc-edpFoundry.cce.internalServices",level:3,children:[],inEdges:["u5oqat"],outEdges:[],kind:"instance",title:"OpenBao",description:{txt:"Secure secret storage"},tags:[],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.openbao",modelRef:"edp.openbao",x:1528,y:554,width:320,height:180,labelBBox:{x:85,y:63,width:151,height:48}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner","otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker","otc-edpFoundry.workflowSetupEDPInfrastructure.edpworkflow"],inEdges:["84397w"],outEdges:[],deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure",title:"EDP infrastructure Workflow",kind:"computeressource",color:"amber",shape:"rectangle",description:{txt:"EDP infrastructure Workflow"},tags:[],style:{opacity:15,size:"md"},depth:1,x:2902,y:150,width:442,height:1010,labelBBox:{x:6,y:0,width:201,height:15}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner","otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunnerWorker","otc-edpFoundry.workflowSetupArgoCDInfrastructure.edpworkflow"],inEdges:["1oz2va9"],outEdges:[],deploymentRef:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",title:"EDP ArgoCD Workflow",kind:"computeressource",color:"amber",shape:"rectangle",description:{txt:"EDP Setup ArgoCD Workflow"},tags:[],style:{opacity:15,size:"md"},depth:1,x:3394,y:150,width:442,height:1010,labelBBox:{x:6,y:0,width:149,height:15}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",level:2,children:[],inEdges:["84397w"],outEdges:["1hnil62"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:2961,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner",parent:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",level:2,children:[],inEdges:["1oz2va9"],outEdges:["1gtxobu"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:3466,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",level:2,children:[],inEdges:["1hnil62"],outEdges:["ekzztw"],kind:"instance",title:"Forgejo Runner Worker",description:{txt:"A worker is a service that runs a job invoked by a runner. A worker typically is a container."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",modelRef:"forgejoRunnerWorker",x:2954,y:554,width:333,height:180,labelBBox:{x:18,y:45,width:297,height:84}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunnerWorker",parent:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",level:2,children:[],inEdges:["1gtxobu"]
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
A tenant is a folder in Foundry-Config-Forgejo. On merge triggers reconciliation to EDP.
2025-12-16 12:13:34 +01:00
Optionally we will have a WebUI/API/CLI`},tags:[],style:{opacity:15,size:"md"},depth:3,x:2052,y:8,width:3408,height:1609,labelBBox:{x:6,y:0,width:280,height:15}},{id:"otc-edpFoundry.cce",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.cce.internalServices","otc-edpFoundry.cce.centralObservability"],inEdges:["628xl1"],outEdges:["84397w","1oz2va9"],deploymentRef:"otc-edpFoundry.cce",title:"OTC CCE",kind:"kubernetes",technology:"Kubernetes",color:"red",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"OTC Container Cluster Engine"},tags:[],style:{opacity:15,size:"md"},depth:2,x:2594,y:79,width:1890,height:1488,labelBBox:{x:6,y:0,width:54,height:15}},{id:"otc-edpFoundry.cce.internalServices",parent:"otc-edpFoundry.cce",level:2,children:["otc-edpFoundry.cce.internalServices.externalSecrets","otc-edpFoundry.cce.internalServices.ingressNginx","otc-edpFoundry.cce.internalServices.argoCD","otc-edpFoundry.cce.internalServices.forgejo","otc-edpFoundry.cce.internalServices.openbao"],inEdges:["628xl1"],outEdges:["84397w","1oz2va9"],deploymentRef:"otc-edpFoundry.cce.internalServices",title:"EDP Foundry Internal Services",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:2644,y:883,width:1790,height:634,labelBBox:{x:6,y:0,width:201,height:15}},{id:"otc-edpFoundry.cce.internalServices.externalSecrets",parent:"otc-edpFoundry.cce.internalServices",level:3,children:[],inEdges:[],outEdges:[],kind:"instance",title:"external-secrets",description:{txt:"Provider to access externally stored Kubernetes secrets"},tags:["internal"],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.externalSecrets",modelRef:"edp.externalSecrets",navigateTo:"externalSecrets",x:2694,y:1287,width:320,height:180,labelBBox:{x:39,y:54,width:242,height:66}},{id:"otc-edpFoundry.cce.centralObservability",parent:"otc-edpFoundry.cce",level:2,children:["otc-edpFoundry.cce.centralObservability.grafana","otc-edpFoundry.cce.centralObservability.prometheus","otc-edpFoundry.cce.centralObservability.loki"],inEdges:[],outEdges:[],deploymentRef:"otc-edpFoundry.cce.centralObservability",title:"EDP Foundry Central Observability",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:3349,y:150,width:870,height:634,labelBBox:{x:6,y:0,width:232,height:15}},{id:"otc-edpFoundry.forgejoRunnerInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner"],inEdges:[],outEdges:["628xl1"],deploymentRef:"otc-edpFoundry.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"green",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},depth:1,x:5026,y:168,width:384,height:266,labelBBox:{x:6,y:0,width:235,height:15}},{id:"otc-edp-per-tenant",parent:null,level:0,children:["otc-edp-per-tenant.forgejoRunnerInfrastructure","otc-edp-per-tenant.cce","otc-edp-per-tenant.cloudServices"],inEdges:["1asm38z","1or831y","ejqwjt"],outEdges:[],deploymentRef:"otc-edp-per-tenant",title:"OTC EDP per tenant cluster",kind:"cloud",technology:"OTC",color:"slate",shape:"rectangle",description:{txt:`OTC environment for EDP. EDP is the environment a customer gets from us.
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
This is kubernetes clusters and other infrastructure like nodes and vms, and platform services. All is set up by IaC-pipelines in the Foundry.`},tags:[],style:{opacity:15,size:"md"},depth:3,x:8,y:97,width:1994,height:1889,labelBBox:{x:6,y:0,width:181,height:15}},{id:"otc-edp-per-tenant.forgejoRunnerInfrastructure",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner"],inEdges:[],outEdges:["1dcszi5"],deploymentRef:"otc-edp-per-tenant.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"primary",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},depth:1,x:608,y:168,width:384,height:266,labelBBox:{x:6,y:0,width:235,height:15}},{id:"otc-edpFoundry.cce.centralObservability.grafana",parent:"otc-edpFoundry.cce.centralObservability",level:3,children:[],inEdges:[],outEdges:["qykxlm","yv49z5"],kind:"instance",title:"Grafana",description:{txt:"Data visualization and monitoring"},tags:[],icon:"tech:grafana",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.centralObservability.grafana",modelRef:"edp.grafana",x:3530,y:222,width:345,height:180,labelBBox:{x:47,y:63,width:283,height:47}},{id:"otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner",parent:"otc-edpFoundry.forgejoRunnerInfrastructure",level:2,children:[],inEdges:[],outEdges:["628xl1"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:5058,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edp-per-tenant.cce",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.cce.edp"],inEdges:["1or831y","ejqwjt","1dcszi5"],outEdges:["8msu1q","120qe5o","ealiax","1trj5u6"],deploymentRef:"otc-edp-per-tenant.cce",title:"OTC CCE",kind:"kubernetes",technology:"Kubernetes",color:"red",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"OTC Container Cluster Engine"},tags:[],style:{opacity:15,size:"md"},depth:2,x:548,y:830,width:1404,height:719,labelBBox:{x:6,y:0,width:54,height:15}},{id:"otc-edp-per-tenant.cce.edp",parent:"otc-edp-per-tenant.cce",level:2,children:["otc-edp-per-tenant.cce.edp.externalSecrets","otc-edp-per-tenant.cce.edp.ingressNginx","otc-edp-per-tenant.cce.edp.argoCD","otc-edp-per-tenant.cce.edp.forgejo"],inEdges:["1or831y","ejqwjt","1dcszi5"],outEdges:["8msu1q","120qe5o","ealiax","1trj5u6"],deploymentRef:"otc-edp-per-tenant.cce.edp",title:"EDP",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:580,y:883,width:1340,height:634,labelBBox:{x:6,y:0,width:27,height:15}},{id:"otc-edp-per-tenant.cce.edp.externalSecrets",parent:"otc-edp-per-tenant.cce.edp",level:3,children:[],inEdges:[],outEdges:[],kind:"instance",title:"external-secrets",description:{txt:"Provider to access externally stored Kubernetes secrets"},tags:["internal"],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.externalSecrets",modelRef:"edp.externalSecrets",navigateTo:"externalSecrets",x:1550,y:1287,width:320,height:180,labelBBox:{x:39,y:54,width:242,height:66}},{id:"otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner",parent:"otc-edp-per-tenant.forgejoRunnerInfrastructure",level:2,children:[],inEdges:[],outEdges:["1dcszi5"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner",modelRef:"forgejoRunn
offering capabilities like
code version controling
collaboration and ticketing
and security scanning`},technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.forgejo",modelRef:"edp.forgejo",navigateTo:"forgejo",x:4044,y:1287,width:340,height:180,labelBBox:{x:46,y:18,width:278,height:139}},{id:"otc-edpFoundry.cce.internalServices.openbao",parent:"otc-edpFoundry.cce.internalServices",level:3,children:[],inEdges:["u5oqat"],outEdges:[],kind:"instance",title:"OpenBao",description:{txt:"Secure secret storage"},tags:[],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.openbao",modelRef:"edp.openbao",x:3594,y:1287,width:320,height:180,labelBBox:{x:85,y:63,width:151,height:48}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner","otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker","otc-edpFoundry.workflowSetupEDPInfrastructure.edpworkflow"],inEdges:["84397w"],outEdges:["1asm38z","1or831y"],deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure",title:"EDP infrastructure Workflow",kind:"computeressource",color:"amber",shape:"rectangle",description:{txt:"EDP infrastructure Workflow"},tags:[],style:{opacity:15,size:"md"},depth:1,x:4534,y:150,width:442,height:1035,labelBBox:{x:6,y:0,width:201,height:15}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner","otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunnerWorker","otc-edpFoundry.workflowSetupArgoCDInfrastructure.edpworkflow"],inEdges:["1oz2va9"],outEdges:["ejqwjt"],deploymentRef:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",title:"EDP ArgoCD Workflow",kind:"computeressource",color:"amber",shape:"rectangle",description:{txt:"EDP Setup ArgoCD Workflow"},tags:[],style:{opacity:15,size:"md"},depth:1,x:2102,y:150,width:442,height:1035,labelBBox:{x:6,y:0,width:149,height:15}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",level:2,children:[],inEdges:["84397w"],outEdges:["1hnil62"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:4595,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner",parent:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",level:2,children:[],inEdges:["1oz2va9"],outEdges:["1gtxobu"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:2163,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",level:2,children:[],inEdges:["1hnil62"],outEdges:["ekzztw"],kind:"instance",title:"Forgejo Runner Worker",description:{txt:"A worker is a service that runs a job invoked by a runner. A worker typically is a container."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",modelRef:"forgejoRunnerWorker",x:4588,y:554,width:333,height:180,labelBBox:{x:18,y:45,width:297,height:84}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunnerWorker",parent:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",level:2,ch
offering capabilities like
code version controling
collaboration and ticketing
and security scanning`},technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.forgejo",modelRef:"edp.forgejo",navigateTo:"forgejo",x:630,y:1287,width:340,height:180,labelBBox:{x:46,y:18,width:278,height:139}},{id:"otc-edp-per-tenant.cloudServices",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.cloudServices.postgres","otc-edp-per-tenant.cloudServices.redis","otc-edp-per-tenant.cloudServices.objectstorage","otc-edp-per-tenant.cloudServices.elasticsearch"],inEdges:["1asm38z","8msu1q","120qe5o","ealiax","1trj5u6"],outEdges:[],deploymentRef:"otc-edp-per-tenant.cloudServices",title:"EDP Cloud Services",kind:"paas",technology:"Cloud Services",color:"primary",shape:"rectangle",description:{txt:"EDP Cloud Services"},tags:[],style:{opacity:15,size:"md"},depth:1,x:58,y:1634,width:1894,height:302,labelBBox:{x:6,y:0,width:127,height:15}},{id:"otc-edp-per-tenant.cloudServices.postgres",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["8msu1q"],outEdges:[],kind:"instance",title:"PostgreSQL",description:{txt:`PostgreSQL is a powerful, open source object-relational database system.
It has more than 15 years of active development and a proven architecture
that has earned it a strong reputation for reliability, data integrity,
and correctness.`},technology:"PostgreSQL",tags:[],icon:"tech:postgresql",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.postgres",modelRef:"postgres",x:1548,y:1706,width:354,height:180,labelBBox:{x:46,y:17,width:292,height:139}},{id:"otc-edp-per-tenant.cloudServices.redis",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["120qe5o"],outEdges:[],kind:"instance",title:"Redis",description:{txt:"Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker."},technology:"Redis",tags:[],icon:"tech:redis",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.redis",modelRef:"redis",x:608,y:1706,width:359,height:180,labelBBox:{x:47,y:26,width:297,height:121}},{id:"otc-edp-per-tenant.cloudServices.objectstorage",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["ealiax"],outEdges:[],kind:"instance",title:"s3 Object Storage",description:{txt:"s3 Object Storage"},technology:"S3 Object Storage",tags:[],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.objectstorage",modelRef:"objectstorage",x:1098,y:1706,width:320,height:180,labelBBox:{x:78,y:53,width:164,height:67}},{id:"otc-edp-per-tenant.cloudServices.elasticsearch",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["1trj5u6"],outEdges:[],kind:"instance",title:"Elasticsearch",description:{txt:`Elasticsearch is a distributed, RESTful search and analytics engine capable of
addressing a growing number of use cases. It centrally stores your data so you can
discover the expected and uncover the unexpected.`},technology:"Elasticsearch",tags:[],icon:"tech:elasticsearch",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.elasticsearch",modelRef:"elasticsearch",x:108,y:1706,width:370,height:180,labelBBox:{x:46,y:17,width:308,height:139}}],edges:[{id:"17kru01",source:"otc-edpFoundry.cce.internalServices.ingressNginx",target:"otc-edpFoundry.cce.internalServices.argoCD",label:"https",points:[[4054,1100],[3915,1148],[3708,1220],[3529,1287],[3511,1294],[3492,1301],[3474,1309]],labelBBox:{x:3755,y:1199,width:34,height:18},parent:"otc-edpFoundry.cce.internalServices",relations:["1yssos5"],color:"gray",line:"dashed",head:"normal"},{id:"170pc3l",source:"otc-edpFoundry.cce.internalServices.ingressNginx",target:"otc-edpFoundry.cce.internalServices.forgejo",label:"https",points:[[4214,1134],[4214,1178],[4214,1232],[4214,1277]],labelBBox:{x:4215,y:1199,width:34,height:18},parent:"otc-edpFoundry.cce.internalServices",relations:["123efwn"],color:"gray",line:"dashed",head:"normal"},{id:"u5oqat",source:"otc-edpFoundry.cce.internalServices.ingressNginx",target:"otc-edpFoundry.cce.internalServices.openbao",label:"https",points:[[4090,1134],[4027,1180],[3950,1235],[3886,1282]],labelBBox:{x:3999,y:1199,width:34,height:18},parent:"otc-edpFoundry.cce.internalServices",relations:["1p30hav"],color:"gray",line:"dashed",head:"normal"},{id:"qykxlm",source:"otc-edpFoundry.cce.centralObservability.grafana",target:"otc-edpFoundry.cce.centralObservability.prometheus",label:"get metrics and alerts",points:[[3664,401],[3645,446],[3622,499],[3602,545]],labelBBox:{x:3636,y:466,width:138,height:18},parent:"otc-edpFoundry.cce.centralObservability",relations:["13uvtiq"],color:"gray",line:"dashed",head:"normal"},{id:"yv49z5",source:"otc-edpFoundry.cce.centralObservability.grafana",target:"otc-edpFoundry.cce.centralObservability.loki",label:"get logs",points:[[3785,401],[3827,446],[3877,501],[3920,547]],labelBBox:{x:3866,y:466,width:53,height:18},parent:"otc-edpFoundry.cce.centralObservability",relations:["1n1utzc"],color:"gray",line:"dashed",head:"normal"},{id:"84397w",source:"otc-edpFoundry.cce.internalServices.forgejo",target:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",label:"invokes",points:[[4384,1359],[4590,1333],[4917,1279],[4991,1185],[5006,1165],[5006,601],[4987,554],[4964,499],[4922,448],[4880,408]],labelBBox:{x:5002,y:799,width:51,height:18},parent:"otc-edpFoundry",relations:["dola40"],color:"gray",line:"dashed",head:"normal"},{id:"1hnil62",source:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",target:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",label:"runs",points:[[4755,401],[4755,445],[4755,499],[4755,544]],labelBBox:{x:4756,y:466,width:31,height:18},parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",relations:["7kqly3"],color:"gray",line:"dashed",head:"normal"},{id:"ekzztw",source:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",target:"otc-edpFoundry.workflowSetupEDPInfrastructure.edpworkflow",label:"executes",points:[[4755,734],[4755,797],[4755,880],[4755,944]],labelBBox:{x:4756,y:799,width:60,height:18},parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",relations:["12hf1w4"],color:"gray",line:"dashed",head:"normal"},{id:"1oz2va9",source:"otc-edpFoundry.cce.internalServices.forgejo",target:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner",label:"invokes",points:[[4044,1309],[4022,1301],[4e3,1294],[3979,1287],[3850,1249],[3808,1275],[3684,1222],[3176,1006],[2655,594],[2433,408]],labelBBox:{x:2970,y:799,width:51,height:18},parent:"otc-edpFoundry",relations:["1f5y9gc"],color:"gray",line:"dashed",head:"normal"},{id:"1gtxobu",source:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner",target:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunnerWorker",label:"runs",points:[[2323,401],[2323,445],[2323,499],[2323,544]],labelBBox:{x:2324,y:466,width:31,height:18},parent:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",relations:["h
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
offering capabilities like
code version controling
collaboration and ticketing
2025-12-18 09:21:05 +01:00
and security scanning`},tags:[],technology:"Golang",kind:"container",isCustomized:!0,navigateTo:"forgejo",x:48,y:553,width:340,height:180,labelBBox:{x:46,y:17,width:279,height:139}},{id:"edp.garm",parent:"edp",level:1,children:["edp.garm.garm","edp.garm.providerEdgeConnect"],inEdges:["step-01","step-06","step-08","step-16"],outEdges:["step-03","step-04","step-07","step-09","step-18","step-19"],title:"Garm Image",modelRef:"edp.garm",shape:"rectangle",color:"primary",icon:"tech:docker",style:{opacity:20,size:"md"},tags:[],kind:"container",depth:1,x:709,y:142,width:1090,height:404,labelBBox:{x:6,y:0,width:77,height:15}},{id:"edp.garm.garm",parent:"edp.garm",level:2,children:[],inEdges:["step-01","step-06","step-08","step-16"],outEdges:["step-02","step-07","step-09","step-17"],title:"Garm",modelRef:"edp.garm.garm",shape:"rectangle",color:"primary",icon:"tech:go",style:{opacity:15,size:"md"},description:{txt:"Provisions runners for Forgejo"},tags:[],kind:"component",x:749,y:316,width:325,height:180,labelBBox:{x:47,y:63,width:262,height:47}},{id:"edp.garm.providerEdgeConnect",parent:"edp.garm",level:2,children:[],inEdges:["step-02","step-17"],outEdges:["step-03","step-04","step-18","step-19"],title:"Garm Provider for EdgeConnect",modelRef:"edp.garm.providerEdgeConnect",shape:"rectangle",color:"primary",icon:"tech:go",style:{opacity:15,size:"md"},description:{txt:"Acts as abstraction layer for EdgeConnect"},tags:[],kind:"component",x:1349,y:203,width:409,height:180,labelBBox:{x:47,y:54,width:347,height:65}},{id:"edgeConnect",parent:null,level:0,children:[],inEdges:["step-03","step-04","step-18","step-19"],outEdges:["step-05"],title:"Edge Connect",modelRef:"edgeConnect",shape:"rectangle",color:"primary",style:{opacity:15,size:"md"},description:{txt:"Provides an API to run applications on the edge"},tags:[],kind:"component",x:2135,y:169,width:320,height:180,labelBBox:{x:18,y:54,width:283,height:65}},{id:"forgejoRunner",parent:null,level:0,children:[],inEdges:["step-05","step-09","step-12","step-15"],outEdges:["step-06","step-10","step-11","step-12","step-13","step-15"],title:"Forgejo Runner",modelRef:"forgejoRunner",shape:"rectangle",color:"primary",style:{opacity:15,size:"md"},description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],kind:"component",x:2665,y:810,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}}],edges:[{id:"step-01",source:"edp.forgejo",target:"edp.garm.garm",label:"(Webhook) A new job is pending",points:[[389,687],[482,703],[596,707],[689,664],[761,631],[818,563],[857,504]],labelBBox:{x:458,y:632,width:228,height:19},parent:"edp",relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@0"},{id:"step-02",source:"edp.garm.garm",target:"edp.garm.providerEdgeConnect",label:"Create new runner",points:[[1074,428],[1142,433],[1220,433],[1289,417],[1321,410],[1352,399],[1383,387]],labelBBox:{x:1144,y:385,width:141,height:19},parent:"edp.garm",relations:["1olxwwi"],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@1"},{id:"step-03",source:"edp.garm.providerEdgeConnect",target:"edgeConnect",label:"Create App (Runner)",points:[[1639,203],[1692,152],[1767,92],[1847,65],[1943,32],[1980,29],[2075,65],[2128,85],[2176,124],[2214,162]],labelBBox:{x:1886,y:7,width:156,height:19},parent:null,relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@2"},{id:"step-04",source:"edp.garm.providerEdgeConnect",target:"edgeConnect",label:"Create AppInstance (Runner)",points:[[1759,234],[1788,228],[1818,222],[1847,219],[1948,206],[1974,210],[2075,219],[2091,220],[2108,222],[2125,225]],labelBBox:{x:1859,y:178,width:209,height:19},parent:null,relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@3"},{id:"step-05",source:"edgeConnect",target:"forgejoRunner",label:"Deploys",points:[[2448,349],[2502,386],[2560,432],[2605,484],[2687,579],[2750,711],[2787,800]],labelBBox:{x:2524,y:372,width:77,height:19},parent:null,relations:[],color:"gray",l
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
offering capabilities like
code version controling
collaboration and ticketing
2025-12-16 12:13:34 +01:00
and security scanning`},tags:[],technology:"Golang",kind:"container",isCustomized:!0,navigateTo:"forgejo",x:585,y:69,width:340,height:180,labelBBox:{x:45,y:17,width:279,height:139}}],edges:[{id:"step-01",source:"localbox.git",target:"edp.forgejogit",label:"git push",points:[[360,449],[430,449],[513,449],[585,449]],labelBBox:{x:429,y:417,width:75,height:19},parent:null,relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@0"},{id:"step-02",source:"edp.forgejogit",target:"forgejoRunner",label:"on push",points:[[896,539],[1008,612],[1151,708],[1172,734],[1219,795],[1184,836],[1232,896],[1233,898],[1235,900],[1236,901]],labelBBox:{x:1051,y:582,width:76,height:19},parent:null,relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@1"},{id:"step-03",source:"forgejoRunner",target:"edp.imageregistry",label:"pushes new image",points:[[1232,1012],[1159,1012],[1073,1003],[1001,972],[934,942],[874,886],[830,837]],labelBBox:{x:1018,y:940,width:143,height:19},parent:null,relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@2"},{id:"step-04",source:"forgejoRunner",target:"edp.forgejogit",label:"pushes new appspec",points:[[900,546],[915,561],[930,577],[941,594],[995,673],[940,726],[1001,800],[1034,839],[1139,892],[1232,933]],labelBBox:{x:1010,y:768,width:158,height:19},dir:"back",parent:null,relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@3"},{id:"step-05",source:"edp.forgejogit",target:"edp.argoCD",label:"triggers deployment",points:[[914,483],[1008,503],[1126,528],[1222,549]],labelBBox:{x:1015,y:473,width:148,height:19},parent:"edp",relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@4"},{id:"step-06",source:"edp.argoCD",target:"cloud",label:"deploys application",points:[[1487,675],[1596,779],[1775,949],[1887,1056]],labelBBox:{x:1621,y:769,width:145,height:19},parent:null,relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@5"},{id:"step-07",source:"cloud",target:"edp.imageregistry",label:"pulls image",points:[[818,837],[897,950],[1047,1129],[1232,1183],[1432,1241],[1674,1216],[1830,1188]],labelBBox:{x:1346,y:1151,width:97,height:19},dir:"back",parent:null,relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@6"}]},edpbuilderworkflow:{_type:"element",tags:null,links:null,viewOf:"edfbuilder",_stage:"layouted",sourcePath:"views/edp/edfbuilder.c4",description:{txt:"Describes the process how to create an EDP instance"},title:"edfbuilder",id:"edpbuilderworkflow",autoLayout:{direction:"LR",nodeSep:110,rankSep:120},hash:"40921acf4f52bd8d6d2ac3a0d1810b3b7bc13b2a",bounds:{x:0,y:0,width:320,height:180},nodes:[{id:"edfbuilder",parent:null,level:0,children:[],inEdges:[],outEdges:[],title:"edfbuilder",modelRef:"edfbuilder",shape:"rectangle",color:"primary",icon:"tech:go",style:{opacity:15,size:"md"},description:{txt:"EDP Foundry Builder"},tags:[],technology:"Golang",kind:"component",x:0,y:0,width:320,height:180,labelBBox:{x:74,y:53,width:203,height:67}}],edges:[]},edp:{_type:"element",tags:null,links:null,viewOf:"edp",_stage:"layouted",sourcePath:"views/edp/edp.c4",description:null,title:"Context view",id:"edp",autoLayout:{direction:"TB"},hash:"3ab95ff726e92d4e64a6b566beb19c19bcc22d22",bounds:{x:0,y:0,width:5229,height:943},nodes:[{id:"forgejoRunner",parent:null,level:0,children:[],inEdges:["stl3mw"],outEdges:["1cy1y20"],title:"Forgejo Runner",modelRef:"forgejoRunner",shape:"rectangle",color:"primary",style:{opacity:25,size:"md"},description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],kind:"component",x:0,y:392,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:102}},{id:"developer",parent:null,level:0,children:[],inEdges:[],outEdges:["1y3lcyj","1ttqc1r","170qzun","1bt83vj","1nv0w41","1agven9","3nxrq7","bfgapq"],title:"Developer",modelRef:"developer",shape:"person",color:"green",style:{opacity:25,size:"md"},description:{txt:"The regular user of the platfor
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
offering capabilities like
code version controling
collaboration and ticketing
2025-12-16 12:13:34 +01:00
and security scanning`},tags:[],technology:"Golang",kind:"container",navigateTo:"forgejo",x:1830,y:392,width:340,height:180,labelBBox:{x:46,y:17,width:278,height:139}},{id:"edp.imageregistry",parent:"edp",level:1,children:[],inEdges:["1nv0w41"],outEdges:[],title:"Forgejo OCI Image Registry",modelRef:"edp.imageregistry",shape:"rectangle",color:"primary",icon:"tech:go",style:{opacity:25,size:"md"},description:{txt:"Container Image Registry"},tags:[],technology:"Golang",kind:"component",x:2280,y:392,width:373,height:180,labelBBox:{x:47,y:53,width:311,height:67}},{id:"edp.grafana",parent:"edp",level:1,children:[],inEdges:["3nxrq7"],outEdges:["1tfxhhz","1adt45o"],title:"Grafana",modelRef:"edp.grafana",shape:"rectangle",color:"primary",icon:"tech:grafana",style:{opacity:25,size:"md"},description:{txt:"Data visualization and monitoring"},tags:[],kind:"container",x:2763,y:392,width:345,height:180,labelBBox:{x:47,y:63,width:283,height:48}},{id:"edp.keycloak",parent:"edp",level:1,children:[],inEdges:["bfgapq"],outEdges:[],title:"Keycloak",modelRef:"edp.keycloak",shape:"rectangle",color:"primary",style:{opacity:25,size:"md"},description:{txt:"Single Sign On for all EDP products"},tags:[],kind:"container",navigateTo:"keycloak",x:3219,y:392,width:320,height:180,labelBBox:{x:39,y:63,width:242,height:48}},{id:"edp.forgejogit",parent:"edp",level:1,children:[],inEdges:["1agven9","f6xyb4"],outEdges:[],title:"ForgejoGit",modelRef:"edp.forgejogit",shape:"rectangle",color:"primary",icon:"tech:git",style:{opacity:25,size:"md"},tags:[],kind:"component",x:4079,y:715,width:320,height:180,labelBBox:{x:97,y:74,width:156,height:24}},{id:"edp.loki",parent:"edp",level:1,children:[],inEdges:["1tfxhhz"],outEdges:[],title:"Loki",modelRef:"edp.loki",shape:"rectangle",color:"primary",style:{opacity:25,size:"md"},description:{txt:"Log aggregation system"},tags:[],kind:"container",x:2991,y:715,width:320,height:180,labelBBox:{x:78,y:63,width:164,height:47}},{id:"edp.prometheus",parent:"edp",level:1,children:[],inEdges:["1adt45o"],outEdges:[],title:"Prometheus",modelRef:"edp.prometheus",shape:"rectangle",color:"primary",icon:"tech:prometheus",style:{opacity:25,size:"md"},description:{txt:"Monitoring and alerting toolkit"},tags:[],kind:"container",x:2561,y:715,width:320,height:180,labelBBox:{x:46,y:63,width:258,height:47}},{id:"edp.mailhog",parent:"edp",level:1,children:[],inEdges:[],outEdges:[],title:"Mailhog",modelRef:"edp.mailhog",shape:"rectangle",color:"primary",style:{opacity:25,size:"md"},description:{txt:"Web and API based SMTP testing"},tags:[],kind:"container",navigateTo:"mailhog",x:890,y:69,width:320,height:180,labelBBox:{x:44,y:63,width:232,height:48}},{id:"edp.minio",parent:"edp",level:1,children:[],inEdges:[],outEdges:[],title:"Minio",modelRef:"edp.minio",shape:"rectangle",color:"primary",style:{opacity:25,size:"md"},description:{txt:"S3 compatible blob storage"},tags:[],kind:"container",navigateTo:"minio",x:1320,y:69,width:320,height:180,labelBBox:{x:67,y:63,width:186,height:48}},{id:"edp.monitoring",parent:"edp",level:1,children:[],inEdges:[],outEdges:[],title:"Monitoring",modelRef:"edp.monitoring",shape:"rectangle",color:"primary",style:{opacity:25,size:"md"},description:{txt:"Observability system to monitor deployed components"},tags:[],kind:"container",navigateTo:"monitoring",x:1860,y:69,width:320,height:180,labelBBox:{x:21,y:54,width:278,height:66}},{id:"edp.openbao",parent:"edp",level:1,children:[],inEdges:[],outEdges:[],title:"OpenBao",modelRef:"edp.openbao",shape:"rectangle",color:"primary",style:{opacity:25,size:"md"},description:{txt:"Secure secret storage"},tags:[],kind:"container",x:430,y:392,width:320,height:180,labelBBox:{x:85,y:63,width:151,height:48}},{id:"edp.testApp",parent:"edp",level:1,children:[],inEdges:[],outEdges:[],title:"Fibonacci",modelRef:"edp.testApp",shape:"rectangle",color:"primary",style:{opacity:25,size:"md"},description:{txt:"Testapp to validate deployments"},tags:[],kind:"container",navigateTo:"testapp",x:860,y:392,width:320,height:180,labelBBox:{x:50,y:63,width:220,height:48}},{id:"edp.garm",parent:"edp",leve
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
offering capabilities like
code version controling
collaboration and ticketing
2025-12-16 12:13:34 +01:00
and security scanning`},tags:[],technology:"Golang",kind:"container",depth:1,x:8,y:239,width:830,height:281,labelBBox:{x:6,y:0,width:58,height:15}},{id:"edp.forgejo.forgejocollaboration",parent:"edp.forgejo",level:1,children:[],inEdges:[],outEdges:[],title:"Collaboration",modelRef:"edp.forgejo.forgejocollaboration",shape:"rectangle",color:"primary",icon:"tech:github",style:{opacity:15,size:"md"},tags:[],kind:"component",x:48,y:300,width:320,height:180,labelBBox:{x:85,y:74,width:180,height:24}},{id:"edp.forgejo.forgejoproject",parent:"edp.forgejo",level:1,children:[],inEdges:[],outEdges:[],title:"Project Mgmt",modelRef:"edp.forgejo.forgejoproject",shape:"rectangle",color:"primary",icon:"tech:github",style:{opacity:15,size:"md"},tags:[],kind:"component",x:478,y:300,width:320,height:180,labelBBox:{x:85,y:74,width:180,height:24}},{id:"edp.ingressNginx",parent:null,level:0,children:[],inEdges:[],outEdges:["1dgzzfb"],title:"Ingress",modelRef:"edp.ingressNginx",shape:"rectangle",color:"primary",style:{opacity:20,size:"md"},description:{txt:"Ingress Controller for incoming http(s) traffic"},tags:["internal"],kind:"container",navigateTo:"ingressNginx",x:48,y:0,width:320,height:180,labelBBox:{x:33,y:54,width:255,height:66}}],edges:[{id:"1dgzzfb",source:"edp.ingressNginx",target:"edp.forgejo",label:"https",points:[[208,180],[208,195],[208,212],[208,228]],labelBBox:{x:173,y:186,width:34,height:18},parent:null,relations:["123efwn"],color:"gray",line:"dashed",head:"normal"}]},crossplane:{_type:"element",tags:null,links:null,viewOf:"edp.crossplane",_stage:"layouted",sourcePath:"views/edp/edp.c4",description:null,title:"Crossplane",id:"crossplane",autoLayout:{direction:"TB"},hash:"21cafdc6d03bbe02437c3a01524d368cfd652a88",bounds:{x:0,y:0,width:1276,height:597},nodes:[{id:"edp.crossplane",parent:null,level:0,children:["edp.crossplane.crossplane","edp.crossplane.crossplaneFunction","edp.crossplane.crossplaneRbacManager","edp.crossplane.providerArgoCD","edp.crossplane.providerKind","edp.crossplane.providerShell"],inEdges:[],outEdges:[],title:"Crossplane",modelRef:"edp.crossplane",shape:"rectangle",color:"primary",style:{opacity:20,size:"md"},description:{txt:"Declarative management of ressources"},tags:["internal"],kind:"container",depth:1,x:8,y:8,width:1260,height:581,labelBBox:{x:6,y:0,width:80,height:15}},{id:"edp.crossplane.crossplane",parent:"edp.crossplane",level:1,children:[],inEdges:[],outEdges:[],title:"Crossplane",modelRef:"edp.crossplane.crossplane",shape:"rectangle",color:"primary",style:{opacity:15,size:"md"},tags:[],kind:"component",x:48,y:69,width:320,height:180,labelBBox:{x:107,y:74,width:105,height:24}},{id:"edp.crossplane.crossplaneFunction",parent:"edp.crossplane",level:1,children:[],inEdges:[],outEdges:[],title:"Function Patch and Transform",modelRef:"edp.crossplane.crossplaneFunction",shape:"rectangle",color:"primary",style:{opacity:15,size:"md"},tags:[],kind:"component",x:478,y:69,width:320,height:180,labelBBox:{x:23,y:74,width:273,height:24}},{id:"edp.crossplane.crossplaneRbacManager",parent:"edp.crossplane",level:1,children:[],inEdges:[],outEdges:[],title:"RBAC Manager",modelRef:"edp.crossplane.crossplaneRbacManager",shape:"rectangle",color:"primary",style:{opacity:15,size:"md"},tags:[],kind:"component",x:908,y:69,width:320,height:180,labelBBox:{x:88,y:74,width:144,height:24}},{id:"edp.crossplane.providerArgoCD",parent:"edp.crossplane",level:1,children:[],inEdges:[],outEdges:[],title:"ArgoCD Provider",modelRef:"edp.crossplane.providerArgoCD",shape:"rectangle",color:"primary",style:{opacity:15,size:"md"},tags:[],kind:"component",x:48,y:369,width:320,height:180,labelBBox:{x:82,y:74,width:155,height:24}},{id:"edp.crossplane.providerKind",parent:"edp.crossplane",level:1,children:[],inEdges:[],outEdges:[],title:"Kind Provider",modelRef:"edp.crossplane.providerKind",shape:"rectangle",color:"primary",style:{opacity:15,size:"md"},tags:[],kind:"component",x:478,y:369,width:320,height:180,labelBBox:{x:98,y:74,width:124,height:24}},{id:"edp.crossplane.providerShell",parent:"edp.crossplane",level:1,children:[],inEdges:[],outEd
offering capabilities like
code version controling
collaboration and ticketing
and security scanning`},tags:[],technology:"Golang",kind:"container",navigateTo:"forgejo",x:860,y:384,width:340,height:180,labelBBox:{x:46,y:17,width:278,height:139}},{id:"edp.keycloak",parent:null,level:0,children:[],inEdges:["dh7ut5"],outEdges:[],title:"Keycloak",modelRef:"edp.keycloak",shape:"rectangle",color:"primary",style:{opacity:20,size:"md"},description:{txt:"Single Sign On for all EDP products"},tags:[],kind:"container",navigateTo:"keycloak",x:1310,y:384,width:320,height:180,labelBBox:{x:39,y:63,width:242,height:48}},{id:"edp.mailhog",parent:null,level:0,children:[],inEdges:["1bv0wod"],outEdges:[],title:"Mailhog",modelRef:"edp.mailhog",shape:"rectangle",color:"primary",style:{opacity:20,size:"md"},description:{txt:"Web and API based SMTP testing"},tags:[],kind:"container",navigateTo:"mailhog",x:1740,y:384,width:320,height:180,labelBBox:{x:44,y:63,width:232,height:48}},{id:"edp.minio",parent:null,level:0,children:[],inEdges:["68hu20"],outEdges:[],title:"Minio",modelRef:"edp.minio",shape:"rectangle",color:"primary",style:{opacity:20,size:"md"},description:{txt:"S3 compatible blob storage"},tags:[],kind:"container",navigateTo:"minio",x:2170,y:384,width:320,height:180,labelBBox:{x:67,y:63,width:186,height:48}},{id:"edp.monitoring",parent:null,level:0,children:[],inEdges:["nx2xew"],outEdges:[],title:"Monitoring",modelRef:"edp.monitoring",shape:"rectangle",color:"primary",style:{opacity:20,size:"md"},description:{txt:"Observability system to monitor deployed components"},tags:[],kind:"container",navigateTo:"monitoring",x:2600,y:384,width:320,height:180,labelBBox:{x:21,y:54,width:278,height:66}},{id:"edp.openbao",parent:null,level:0,children:[],inEdges:["momp7g"],outEdges:[],title:"OpenBao",modelRef:"edp.openbao",shape:"rectangle",color:"primary",style:{opacity:20,size:"md"},description:{txt:"Secure secret storage"},tags:[],kind:"container",x:3030,y:384,width:320,height:180,labelBBox:{x:85,y:63,width:151,height:48}},{id:"edp.testApp",parent:null,level:0,children:[],inEdges:["8cmkj7"],outEdges:[],title:"Fibonacci",modelRef:"edp.testApp",shape:"rectangle",color:"primary",style:{opacity:20,size:"md"},description:{txt:"Testapp to validate deployments"},tags:[],kind:"container",navigateTo:"testapp",x:3460,y:384,width:320,height:180,labelBBox:{x:50,y:63,width:220,height:48}}],edges:[{id:"1poylyw",source:"edp.ingressNginx.ingressNginx",target:"edp.argoCD",label:"https",points:[[1740,164],[1459,187],[862,248],[375,384],[360,388],[345,393],[329,398]],labelBBox:{x:704,y:301,width:34,height:18},parent:null,relations:["1yssos5"],color:"gray",line:"dashed",head:"normal"},{id:"llqgvs",source:"edp.ingressNginx.ingressNginx",target:"edp.ui",label:"https",points:[[1740,177],[1525,211],[1131,283],[805,384],[790,389],[775,394],[759,400]],labelBBox:{x:1102,y:301,width:34,height:18},parent:null,relations:["v8c8aq"],color:"gray",line:"dashed",head:"normal"},{id:"75xltk",source:"edp.ingressNginx.ingressNginx",target:"edp.forgejo",label:"https",points:[[1740,208],[1609,254],[1420,322],[1255,384],[1240,390],[1225,395],[1210,401]],labelBBox:{x:1468,y:301,width:34,height:18},parent:null,relations:["123efwn"],color:"gray",line:"dashed",head:"normal"},{id:"dh7ut5",source:"edp.ingressNginx.ingressNginx",target:"edp.keycloak",label:"https",points:[[1781,241],[1724,284],[1655,335],[1597,378]],labelBBox:{x:1699,y:301,width:34,height:18},parent:null,relations:["h3rut2"],color:"gray",line:"dashed",head:"normal"},{id:"1bv0wod",source:"edp.ingressNginx.ingressNginx",target:"edp.mailhog",label:"https",points:[[1900,241],[1900,282],[1900,331],[1900,374]],labelBBox:{x:1901,y:301,width:34,height:18},parent:null,relations:["ofdedh"],color:"gray",line:"dashed",head:"normal"},{id:"68hu20",source:"edp.ingressNginx.ingressNginx",target:"edp.minio",label:"https",points:[[2019,241],[2076,284],[2145,335],[2203,378]],labelBBox:{x:2129,y:301,width:34,height:18},parent:null,relations:["fe65w2"],color:"gray",line:"dashed",head:"normal"},{id:"nx2xew",source:"edp.ingressNginx.ingressNginx",target:"edp.monitoring",label:"https",points:[[2060,207],[2191,253],[2381,321],[25
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
addressing a growing number of use cases. It centrally stores your data so you can
2025-12-16 12:13:34 +01:00
discover the expected and uncover the unexpected.`},tags:[],technology:"Elasticsearch",kind:"container",x:0,y:0,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:741,y:0,width:320,height:180,labelBBox:{x:78,y:53,width:164,height:67}},{id:"postgres",parent:null,level:0,children:[],inEdges:[],outEdges:[],title:"PostgreSQL",modelRef:"postgres",shape:"rectangle",color:"primary",icon:"tech:postgresql",style:{opacity:20,size:"md"},description:{txt:`PostgreSQL is a powerful, open source object-relational database system.
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
It has more than 15 years of active development and a proven architecture
that has earned it a strong reputation for reliability, data integrity,
2025-12-16 12:13:34 +01:00
and correctness.`},tags:[],technology:"PostgreSQL",kind:"container",x:1271,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:1919,y:0,width:359,height:180,labelBBox:{x:46,y:26,width:297,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:25,y:1286,width:320,height:180,labelBBox:{x:72,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:2534,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:2534,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:741,y:1073,width:320,height:180,labelBBox:{x:74,y:53,width:202,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:709,y:1576,width:384,height:180,labelBBox:{x:46,y:44,width:322,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:1287,y:1286,width:321,height:180,labelBBox:{x:47,y:35,width:259,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:1221,y:500,width:1123,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:1288,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:1260,y:994,width:375,height:180,labelB
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
addressing a growing number of use cases. It centrally stores your data so you can
2025-12-16 12:13:34 +01:00
discover the expected and uncover the unexpected.`},tags:[],technology:"Elasticsearch",kind:"container",x:0,y:0,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:859,y:0,width:520,height:290,labelBBox:{x:146,y:96,width:228,height:89}},{id:"postgres",parent:null,level:0,children:[],inEdges:[],outEdges:[],title:"PostgreSQL",modelRef:"postgres",shape:"rectangle",color:"primary",icon:"tech:postgresql",style:{opacity:20,size:"xl"},description:{txt:`PostgreSQL is a powerful, open source object-relational database system.
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
It has more than 15 years of active development and a proven architecture
that has earned it a strong reputation for reliability, data integrity,
2025-12-16 12:13:34 +01:00
and correctness.`},tags:[],technology:"PostgreSQL",kind:"container",x:1557,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:2371,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:2
This is kubernetes clusters and other infrastructure like nodes and vms, and platform services. All is set up by IaC-pipelines in the Foundry.`},technology:"OTC",title:"OTC EDP per tenant cluster",id:"otc-edp-per-tenant"},"otc-faas":{style:{},kind:"cloud",description:{txt:"OTC environments for Prototype FaaS."},technology:"OTC",title:"OTC prototype FaaS",id:"otc-faas"},edge:{style:{},kind:"cloud",description:{txt:"Edge environments for distributed workloads."},technology:"Edge",title:"Edge Cloud",id:"edge"},"otc-edpFoundry":{style:{},kind:"cloud",description:{txt:`OTC environments for the central EDP Foundry services. This is kubernetes clusters and other infrastructure like nodes and vms, and optionally platform services. All is set up by IaC terraform and edpbuilder.
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
A tenant is a folder in Foundry-Config-Forgejo. On merge triggers reconciliation to EDP.
Optionally we will have a WebUI/API/CLI`},technology:"OTC",title:"OTC EDP Foundry Central Service clusters",id:"otc-edpFoundry"},edgeProvider:{style:{icon:"tech:terraform"},kind:"paas",description:{txt:"Unlocks the terraform ecosystem"},title:"Terraform Edge provider",id:"edgeProvider"},edgeProviderHost:{style:{},kind:"environment",title:"OTC",id:"edgeProviderHost"},edgeSdk:{style:{icon:"tech:go"},kind:"paas",description:{txt:"Wrapper around API"},technology:"Cloud Services",title:"Edge Cloud SDK",id:"edgeSdk"},edgeCloud:{style:{},kind:"environment",title:"Edge cloud",id:"edgeCloud"},otcTenantProd:{style:{},kind:"environment",title:"Prod - builth.ing",id:"otcTenantProd"},otcTenantNonProd:{style:{},kind:"environment",title:"Non-Prod - t09.de",id:"otcTenantNonProd"},otcKubernetes:{style:{icon:"tech:kubernetes"},kind:"environment",description:{txt:"OTC Container Cluster Engine hosting EDP platform"},technology:"Kubernetes",title:"OTC Kubernetes",id:"otcKubernetes"},edgeConnectEnv:{style:{icon:"tech:docker"},kind:"environment",description:{txt:"Edge infrastructure for ephemeral runner deployment"},technology:"Edge Connect Platform",title:"Edge Connect",id:"edgeConnectEnv"},"local.backstage":{style:{},kind:"namespace",title:"backstage",id:"local.backstage"},"local.argocd":{style:{},kind:"namespace",title:"argocd",id:"local.argocd"},"local.gitea":{style:{},kind:"namespace",title:"gitea",id:"local.gitea"},"local.keycloak":{style:{},kind:"namespace",title:"keycloak",id:"local.keycloak"},"local.crossplane":{style:{},kind:"namespace",title:"crossplane-system",id:"local.crossplane"},"local.externalSecrets":{style:{},kind:"namespace",title:"external-secrets",id:"local.externalSecrets"},"local.velero":{style:{},kind:"namespace",title:"velero",id:"local.velero"},"local.minio":{style:{},kind:"namespace",title:"minio-backup",id:"local.minio"},"local.monitoring":{style:{},kind:"namespace",title:"monitoring",id:"local.monitoring"},"local.ingressNginx":{style:{},kind:"namespace",title:"ingress-nginx",id:"local.ingressNginx"},"local.openbao":{style:{},kind:"namespace",title:"openbao",id:"local.openbao"},"local.fibonacci":{style:{},kind:"namespace",title:"fibonacci-app",id:"local.fibonacci"},"local.mailhog":{style:{},kind:"namespace",title:"mailhog",id:"local.mailhog"},"local.spark":{style:{},kind:"namespace",title:"spark",id:"local.spark"},"otc-edp-per-tenant.cce":{style:{icon:"tech:kubernetes"},kind:"kubernetes",description:{txt:"OTC Container Cluster Engine"},technology:"Kubernetes",title:"OTC CCE",id:"otc-edp-per-tenant.cce"},"otc-edp-per-tenant.cloudServices":{style:{},kind:"paas",description:{txt:"EDP Cloud Services"},technology:"Cloud Services",title:"EDP Cloud Services",id:"otc-edp-per-tenant.cloudServices"},"otc-edp-per-tenant.forgejoRunnerInfrastructure":{style:{},kind:"computeressource",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},title:"EDP ForgejoRunner infrastructure",id:"otc-edp-per-tenant.forgejoRunnerInfrastructure"},"otc-faas.dev":{style:{},kind:"environment",description:{txt:"*.t09.de"},technology:"OTC",title:"tenant Dev",id:"otc-faas.dev"},"otc-faas.prod":{style:{},kind:"environment",description:{txt:"*.buildth.ing"},technology:"OTC",title:"Tenant Prod",id:"otc-faas.prod"},"edge.edge-dev":{style:{},kind:"environment",description:{txt:"Edge development environment"},technology:"Edge",title:"Edge Dev",id:"edge.edge-dev"},"edge.edge-prod":{style:{},kind:"environment",description:{txt:"Edge production environment"},technology:"Edge",title:"Edge Prod",id:"edge.edge-prod"},"otc-edpFoundry.cce":{style:{icon:"tech:kubernetes"},kind:"kubernetes",description:{txt:"OTC Container Cluster Engine"},technology:"Kubernetes",title:"OTC CCE",id:"otc-edpFoundry.cce"},"otc-edpFoundry.workflowSetupEDPInfrastructure":{style:{},kind:"computeressource",description:{txt:"EDP infrastructure Workflow"},title:"EDP infrastructure Workflow",id:"otc-edpFoundry.workflowSetupEDPInfrastructure"},"otc-edpFoundry.workflowSetupArgoCDInfrastructure":{style:{},kind:"computeressource",description:{txt:"EDP Setup ArgoCD Workf
2025-12-16 12:13:34 +01:00
at`)?" (<anonymous>)":-1<b.stack.indexOf("@")?"@unknown:0:0":""}return`
`+ce+h+pe}var De=!1;function Be(h,m){if(!h||De)return"";De=!0;var b=Error.prepareStackTrace;Error.prepareStackTrace=void 0;try{var E={DetermineComponentFrameRoot:function(){try{if(m){var ze=function(){throw Error()};if(Object.defineProperty(ze.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(ze,[])}catch(we){var ye=we}Reflect.construct(h,[],ze)}else{try{ze.call()}catch(we){ye=we}h.call(ze.prototype)}}else{try{throw Error()}catch(we){ye=we}(ze=h())&&typeof ze.catch=="function"&&ze.catch(function(){})}}catch(we){if(we&&ye&&typeof we.stack=="string")return[we.stack,ye.stack]}return[null,null]}};E.DetermineComponentFrameRoot.displayName="DetermineComponentFrameRoot";var D=Object.getOwnPropertyDescriptor(E.DetermineComponentFrameRoot,"name");D&&D.configurable&&Object.defineProperty(E.DetermineComponentFrameRoot,"name",{value:"DetermineComponentFrameRoot"});var M=E.DetermineComponentFrameRoot(),X=M[0],ne=M[1];if(X&&ne){var se=X.split(`
2025-12-16 12:13:34 +01:00
`),ge=ne.split(`
`);for(D=E=0;E<se.length&&!se[E].includes("DetermineComponentFrameRoot");)E++;for(;D<ge.length&&!ge[D].includes("DetermineComponentFrameRoot");)D++;if(E===se.length||D===ge.length)for(E=se.length-1,D=ge.length-1;1<=E&&0<=D&&se[E]!==ge[D];)D--;for(;1<=E&&0<=D;E--,D--)if(se[E]!==ge[D]){if(E!==1||D!==1)do if(E--,D--,0>D||se[E]!==ge[D]){var Ee=`
`+se[E].replace(" at new "," at ");return h.displayName&&Ee.includes("<anonymous>")&&(Ee=Ee.replace("<anonymous>",h.displayName)),Ee}while(1<=E&&0<=D);break}}}finally{De=!1,Error.prepareStackTrace=b}return(b=h?h.displayName||h.name:"")?xe(b):""}function Je(h,m){switch(h.tag){case 26:case 27:case 5:return xe(h.type);case 16:return xe("Lazy");case 13:return h.child!==m&&m!==null?xe("Suspense Fallback"):xe("Suspense");case 19:return xe("SuspenseList");case 0:case 15:return Be(h.type,!1);case 11:return Be(h.type.render,!1);case 1:return Be(h.type,!0);case 31:return xe("Activity");default:return""}}function st(h){try{var m="",b=null;do m+=Je(h,b),b=h,h=h.return;while(h);return m}catch(E){return`
Error generating stack: `+E.message+`
`+E.stack}}var Le=Object.prototype.hasOwnProperty,St=e.unstable_scheduleCallback,Ve=e.unstable_cancelCallback,qe=e.unstable_shouldYield,Xe=e.unstable_requestPaint,Ot=e.unstable_now,Et=e.unstable_getCurrentPriorityLevel,be=e.unstable_ImmediatePriority,ke=e.unstable_UserBlockingPriority,Ye=e.unstable_NormalPriority,yt=e.unstable_LowPriority,xt=e.unstable_IdlePriority,Tr=e.log,er=e.unstable_setDisableYieldValue,qt=null,Ht=null;function Zr(h){if(typeof Tr=="function"&&er(h),Ht&&typeof Ht.setStrictMode=="function")try{Ht.setStrictMode(qt,h)}catch{}}var Gt=Math.clz32?Math.clz32:fn,ln=Math.log,Wn=Math.LN2;function fn(h){return h>>>=0,h===0?32:31-(ln(h)/Wn|0)|0}var oo=256,Uo=262144,jo=4194304;function sa(h){var m=h&42;if(m!==0)return m;switch(h&-h){case 1:return 1;case 2:return 2;case 4:return 4;case 8:return 8;case 16:return 16;case 32:return 32;case 64:return 64;case 128:return 128;case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:return h&261888;case 262144:case 524288:case 1048576:case 2097152:return h&3932160;case 4194304:case 8388608:case 16777216:case 33554432:return h&62914560;case 67108864:return 67108864;case 134217728:return 134217728;case 268435456:return 268435456;case 536870912:return 536870912;case 1073741824:return 0;default:return h}}function Al(h,m,b){var E=h.pendingLanes;if(E===0)return 0;var D=0,M=h.suspendedLanes,X=h.pingedLanes;h=h.warmLanes;var ne=E&134217727;return ne!==0?(E=ne&~M,E!==0?D=sa(E):(X&=ne,X!==0?D=sa(X):b||(b=ne&~h,b!==0&&(D=sa(b))))):(ne=E&~M,ne!==0?D=sa(ne):X!==0?D=sa(X):b||(b=E&~h,b!==0&&(D=sa(b)))),D===0?0:m!==0&&m!==D&&(m&M)===0&&(M=D&-D,b=m&-m,M>=b||M===32&&(b&4194048)!==0)?m:D}function Ao(h,m){return(h.pendingLanes&~(h.suspendedLanes&~h.pingedLanes)&m)===0}function bs(h,m){switch(h){case 1:case 2:case 4:case 8:case 64:return m+250;case 16:case 32:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:return m+5e3;case 4194304:case 8388608:case 16777216:case 33554432:return-1;case 67108864:case 134217728:case 268435456:case 536870912:case 1073741824:return-1;default:return-1}}function xs(){var h=jo;return jo<<=1,(jo&62914560)===0&&(jo=4194304),h}function kc(h){for(var m=[],b=0;31>b;b++)m.push(h);return m}function Dl(h,m){h.pendingLanes|=m,m!==268435456&&(h.suspendedLanes=0,h.pingedLanes=0,h.warmLanes=0)}function ih(h,m,b,E,D,M){var X=h.pendingLanes;h.pendingLanes=b,h.suspendedLanes=0,h.pingedLanes=0,h.warmLanes=0,h.expiredLanes&=b,h.entangledLanes&=b,h.errorRecoveryDisabledLanes&=b,h.shellSuspendCounter=0;var ne=h.entanglements,se=h.expirationTimes,ge=h.hiddenUpdates;for(b=X&~b;0<b;){var Ee=31-Gt(b),ze=1<<Ee;ne[Ee]=0,se[Ee]=-1;var ye=ge[Ee];if(ye!==null)for(ge[Ee]=null,Ee=0;Ee<ye.length;Ee++){var we=ye[Ee];we!==null&&(we.lane&=-536870913)}b&=~ze}E!==0&&ws(h,E,0),M!==0&&D===0&&h.tag!==0&&(h.suspendedLanes|=M&~(X&~m))}function ws(h,m,b){h.pendingLanes|=m,h.suspendedLanes&=~m;var E=31-Gt(m);h.entangledLanes|=m,h.entanglements[E]=h.entanglements[E]|1073741824|b&261930}function Hd(h,m){var b=h.entangledLanes|=m;for(h=h.entanglements;b;){var E=31-Gt(b),D=1<<E;D&m|h[E]&m&&(h[E]|=m),b&=~D}}function Wo(h,m){var b=m&-m;return b=(b&42)!==0?1:_c(b),(b&(h.suspendedLanes|m))!==0?0:b}function _c(h){switch(h){case 2:h=1;break;case 8:h=4;break;case 32:h=16;break;case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:case 4194304:case 8388608:case 16777216:case 33554432:h=128;break;case 268435456:h=134217728;break;default:h=0}return h}function ks(h){return h&=-h,2<h?8<h?(h&134217727)!==0?32:268435456:8:2}function Ud(){var h=F.p;return h!==0?h:(h=window.event,h===void 0?32:$me(h.type))}function _s(h,m){var b=F.p;try{return F.p=h,m()}finally{F.p=b}}var Go=Math.random().toString(36).slice(2),Mr="__reactFiber$"+Go,Nn="__reactProps$"+Go,Do="__reactContainer$"+Go,Nl="__reactEvents$"+Go,Sc="__reactListeners$"+Go,lh="__reactHandles$"+Go,Ba="__reactResources$"
`).replace(Rbt,"")}function tme(h,m){return m=eme(m),eme(h)===m}function kr(h,m,b,E,D,M){switch(b){case"children":typeof E=="string"?m==="body"||m==="textarea"&&E===""||Fe(h,E):(typeof E=="number"||typeof E=="bigint")&&m!=="body"&&Fe(h,""+E);break;case"className":Cs(h,"class",E);break;case"tabIndex":Cs(h,"tabindex",E);break;case"dir":case"role":case"viewBox":case"width":case"height":Cs(h,b,E);break;case"style":It(h,E,M);break;case"data":if(m!=="object"){Cs(h,"data",E);break}case"src":case"href":if(E===""&&(m!=="a"||b!=="href")){h.removeAttribute(b);break}if(E==null||typeof E=="function"||typeof E=="symbol"||typeof E=="boolean"){h.removeAttribute(b);break}E=vt(""+E),h.setAttribute(b,E);break;case"action":case"formAction":if(typeof E=="function"){h.setAttribute(b,"javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')");break}else typeof M=="function"&&(b==="formAction"?(m!=="input"&&kr(h,m,"name",D.name,D,null),kr(h,m,"formEncType",D.formEncType,D,null),kr(h,m,"formMethod",D.formMethod,D,null),kr(h,m,"formTarget",D.formTarget,D,null)):(kr(h,m,"encType",D.encType,D,null),kr(h,m,"method",D.method,D,null),kr(h,m,"target",D.target,D,null)));if(E==null||typeof E=="symbol"||typeof E=="boolean"){h.removeAttribute(b);break}E=vt(""+E),h.setAttribute(b,E);break;case"onClick":E!=null&&(h.onclick=Lt);break;case"onScroll":E!=null&&Wt("scroll",h);break;case"onScrollEnd":E!=null&&Wt("scrollend",h);break;case"dangerouslySetInnerHTML":if(E!=null){if(typeof E!="object"||!("__html"in E))throw Error(o(61));if(b=E.__html,b!=null){if(D.children!=null)throw Error(o(60));h.innerHTML=b}}break;case"multiple":h.multiple=E&&typeof E!="function"&&typeof E!="symbol";break;case"muted":h.muted=E&&typeof E!="function"&&typeof E!="symbol";break;case"suppressContentEditableWarning":case"suppressHydrationWarning":case"defaultValue":case"defaultChecked":case"innerHTML":case"ref":break;case"autoFocus":break;case"xlinkHref":if(E==null||typeof E=="function"||typeof E=="boolean"||typeof E=="symbol"){h.removeAttribute("xlink:href");break}b=vt(""+E),h.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",b);break;case"contentEditable":case"spellCheck":case"draggable":case"value":case"autoReverse":case"externalResourcesRequired":case"focusable":case"preserveAlpha":E!=null&&typeof E!="function"&&typeof E!="symbol"?h.setAttribute(b,""+E):h.removeAttribute(b);break;case"inert":case"allowFullScreen":case"async":case"autoPlay":case"controls":case"default":case"defer":case"disabled":case"disablePictureInPicture":case"disableRemotePlayback":case"formNoValidate":case"hidden":case"loop":case"noModule":case"noValidate":case"open":case"playsInline":case"readOnly":case"required":case"reversed":case"scoped":case"seamless":case"itemScope":E&&typeof E!="function"&&typeof E!="symbol"?h.setAttribute(b,""):h.removeAttribute(b);break;case"capture":case"download":E===!0?h.setAttribute(b,""):E!==!1&&E!=null&&typeof E!="function"&&typeof E!="symbol"?h.setAttribute(b,E):h.removeAttribute(b);break;case"cols":case"rows":case"size":case"span":E!=null&&typeof E!="function"&&typeof E!="symbol"&&!isNaN(E)&&1<=E?h.setAttribute(b,E):h.removeAttribute(b);break;case"rowSpan":case"start":E==null||typeof E=="function"||typeof E=="symbol"||isNaN(E)?h.removeAttribute(b):h.setAttribute(b,E);break;case"popover":Wt("beforetoggle",h),Wt("toggle",h),Es(h,"popover",E);break;case"xlinkActuate":No(h,"http://www.w3.org/1999/xlink","xlink:actuate",E);break;case"xlinkArcrole":No(h,"http://www.w3.org/1999/xlink","xlink:arcrole",E);break;case"xlinkRole":No(h,"http://www.w3.org/1999/xlink","xlink:role",E);break;case"xlinkShow":No(h,"http://www.w3.org/1999/xlink","xlink:show",E);break;case"xlinkTitle":No(h,"http://www.w3.org/1999/xlink","xlink:title",E);break;case"xlinkType":No(h,"http://www.w3.org/1999/xlink","xlink:type",E);break;case"xmlBase":No(h,"http://www.w3.org/XML/1998/namespace","xm
2025-12-16 12:13:34 +01:00
.`.concat(WQe,` {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
overflow: hidden `).concat(o,`;
2025-12-16 12:13:34 +01:00
padding-right: `).concat(s,"px ").concat(o,`;
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
}
2025-12-16 12:13:34 +01:00
body[`).concat($m,`] {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
overflow: hidden `).concat(o,`;
overscroll-behavior: contain;
`).concat([r&&"position: relative ".concat(o,";"),n==="margin"&&`
padding-left: `.concat(a,`px;
padding-top: `).concat(i,`px;
2025-12-16 12:13:34 +01:00
padding-right: `).concat(l,`px;
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
margin-left:0;
margin-top:0;
2025-12-16 12:13:34 +01:00
margin-right: `).concat(s,"px ").concat(o,`;
`),n==="padding"&&"padding-right: ".concat(s,"px ").concat(o,";")].filter(Boolean).join(""),`
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
}
2025-12-16 12:13:34 +01:00
.`).concat(G2,` {
right: `).concat(s,"px ").concat(o,`;
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
}
2025-12-16 12:13:34 +01:00
.`).concat(Y2,` {
margin-right: `).concat(s,"px ").concat(o,`;
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
}
2025-12-16 12:13:34 +01:00
.`).concat(G2," .").concat(G2,` {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
right: 0 `).concat(o,`;
}
2025-12-16 12:13:34 +01:00
.`).concat(Y2," .").concat(Y2,` {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
margin-right: 0 `).concat(o,`;
}
2025-12-16 12:13:34 +01:00
body[`).concat($m,`] {
`).concat(GQe,": ").concat(s,`px;
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
}
2025-12-16 12:13:34 +01:00
`)},sre=function(){var e=parseInt(document.body.getAttribute($m)||"0",10);return isFinite(e)?e:0},pJe=function(){S.useEffect(function(){return document.body.setAttribute($m,(sre()+1).toString()),function(){var e=sre()-1;e<=0?document.body.removeAttribute($m):document.body.setAttribute($m,e.toString())}},[])},hJe=function(e){var r=e.noRelative,n=e.noImportant,o=e.gapMode,a=o===void 0?"margin":o;pJe();var i=S.useMemo(function(){return cJe(a)},[a]);return S.createElement(dJe,{styles:uJe(i,!r,a,n?"":"!important")})},qz=!1;if(typeof window<"u")try{var Z2=Object.defineProperty({},"passive",{get:function(){return qz=!0,!0}});window.addEventListener("test",Z2,Z2),window.removeEventListener("test",Z2,Z2)}catch{qz=!1}var zm=qz?{passive:!1}:!1,fJe=function(e){return e.tagName==="TEXTAREA"},cre=function(e,r){if(!(e instanceof Element))return!1;var n=window.getComputedStyle(e);return n[r]!=="hidden"&&!(n.overflowY===n.overflowX&&!fJe(e)&&n[r]==="visible")},mJe=function(e){return cre(e,"overflowY")},gJe=function(e){return cre(e,"overflowX")},dre=function(e,r){var n=r.ownerDocument,o=r;do{typeof ShadowRoot<"u"&&o instanceof ShadowRoot&&(o=o.host);var a=ure(e,o);if(a){var i=pre(e,o),l=i[1],s=i[2];if(l>s)return!0}o=o.parentNode}while(o&&o!==n.body);return!1},yJe=function(e){var r=e.scrollTop,n=e.scrollHeight,o=e.clientHeight;return[r,n,o]},vJe=function(e){var r=e.scrollLeft,n=e.scrollWidth,o=e.clientWidth;return[r,n,o]},ure=function(e,r){return e==="v"?mJe(r):gJe(r)},pre=function(e,r){return e==="v"?yJe(r):vJe(r)},bJe=function(e,r){return e==="h"&&r==="rtl"?-1:1},xJe=function(e,r,n,o,a){var i=bJe(e,window.getComputedStyle(r).direction),l=i*o,s=n.target,c=r.contains(s),d=!1,u=l>0,p=0,f=0;do{if(!s)break;var g=pre(e,s),v=g[0],w=g[1],x=g[2],k=w-x-i*v;(v||k)&&ure(e,s)&&(p+=k,f+=v);var C=s.parentNode;s=C&&C.nodeType===Node.DOCUMENT_FRAGMENT_NODE?C.host:C}while(!c&&s!==document.body||c&&(r.contains(s)||r===s));return(u&&Math.abs(p)<1||!u&&Math.abs(f)<1)&&(d=!0),d},K2=function(e){return"changedTouches"in e?[e.changedTouches[0].clientX,e.changedTouches[0].clientY]:[0,0]},hre=function(e){return[e.deltaX,e.deltaY]},fre=function(e){return e&&"current"in e?e.current:e},wJe=function(e,r){return e[0]===r[0]&&e[1]===r[1]},kJe=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;}
`)},_Je=0,Rm=[];function SJe(e){var r=S.useRef([]),n=S.useRef([0,0]),o=S.useRef(),a=S.useState(_Je++)[0],i=S.useState(lre)[0],l=S.useRef(e);S.useEffect(function(){l.current=e},[e]),S.useEffect(function(){if(e.inert){document.body.classList.add("block-interactivity-".concat(a));var w=UQe([e.lockRef.current],(e.shards||[]).map(fre)).filter(Boolean);return w.forEach(function(x){return x.classList.add("allow-interactivity-".concat(a))}),function(){document.body.classList.remove("block-interactivity-".concat(a)),w.forEach(function(x){return x.classList.remove("allow-interactivity-".concat(a))})}}},[e.inert,e.lockRef.current,e.shards]);var s=S.useCallback(function(w,x){if("touches"in w&&w.touches.length===2||w.type==="wheel"&&w.ctrlKey)return!l.current.allowPinchZoom;var k=K2(w),C=n.current,_="deltaX"in w?w.deltaX:C[0]-k[0],$="deltaY"in w?w.deltaY:C[1]-k[1],z,T=w.target,A=Math.abs(_)>Math.abs($)?"h":"v";if("touches"in w&&A==="h"&&T.type==="range")return!1;var R=dre(A,T);if(!R)return!0;if(R?z=A:(z=A==="v"?"h":"v",R=dre(A,T)),!R)return!1;if(!o.current&&"changedTouches"in w&&(_||$)&&(o.current=z),!z)return!0;var j=o.current||z;return xJe(j,x,w,j==="h"?_:$)},[]),c=S.useCallback(function(w){var x=w;if(!(!Rm.length||Rm[Rm.length-1]!==i)){var k="deltaY"in x?hre(x):K2(x),C=r.current.filter(function(z){return z.name===x.type&&(z.target===x.target||x.target===z.shadowParent)&&wJe(z.delta,k)})[0];if(C&&C.should){x.cancelable&&x.preventDefault();return}if(!C){var _=(l.current.shards||[]).map(fre).filter(Boolean).filter(function(z){return z.contains(x.target)}),$=_.length>0?s(x,_[0]):!l.current.noIsolation;$&&x.cancelable&&x.preventDefault()}}},[]),d=S.useCallback(function(w,x,k,C){var _={name:w,delta:x,target:k,should:C,shadowParent:EJe(k)};r.current.push(_),setTimeout(function(){r.current=r.current.filter(function($){return $!==_})},1)},[]),u=S.useCallback(function(w){n.current=K2(w),o.current=void 0},[]),p=S.useCallback(function(w){d(w.type,hre(w),w.target,s(w,e.lockRef.current))},[]),f=S.useCallback(function(w){d(w.type,K2(w),w.target,s(w,e.lockRef.current))},[]);S.useEffect(function(){return Rm.push(i),e.setCallbacks({onScrollCapture:p,onWheelCapture:p,onTouchMoveCapture:f}),document.addEventListener("wheel",c,zm),document.addEventListener("touchmove",c,zm),document.addEventListener("touchstart",u,zm),function(){Rm=Rm.filter(function(w){return w!==i}),document.removeEventListener("wheel",c,zm),document.removeEventListener("touchmove",c,zm),document.removeEventListener("touchstart",u,zm)}},[]);var g=e.removeScrollBar,v=e.inert;return S.createElement(S.Fragment,null,v?S.createElement(i,{styles:kJe(a)}):null,g?S.createElement(hJe,{noRelative:e.noRelative,gapMode:e.gapMode}):null)}function EJe(e){for(var r=null;e!==null;)e instanceof ShadowRoot&&(r=e.host,e=e.host),e=e.parentNode;return r}const CJe=eJe(ire,SJe);var mre=S.forwardRef(function(e,r){return S.createElement(X2,is({},e,{ref:r,sideCar:CJe}))});mre.classNames=X2.classNames;function zo(e){return Object.keys(e)}function $Je(e){return e.replace(/[A-Z]/g,r=>`-${r.toLowerCase()}`)}function zJe(e){return typeof e!="string"||!e.includes("var(--mantine-scale)")?e:e.match(/^calc\((.*?)\)$/)?.[1].split("*")[0].trim()}function Q2(e){const r=zJe(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 gre(e){return e==="0rem"?"0rem":`calc(${e} * var(--mantine-scale))`}function yre(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?gre(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?gre(i):i}}return o}return n}const Pe=yre("rem",{shouldScale:!0});
`;let Y,Z=!0;const I=j.numbers=="binary",W=j.numbers=="octal",K=j.numbers=="decimal",Q=j.numbers=="hexadecimal";if(L&&R&&v(R.toJSON)&&(R=R.toJSON()),!p(R)){if(w(R))return R.size==0?"new Map()":(N||(j.__inline1__=!0,j.__inline2__=!1),"new Map("+A(Array.from(R),j)+")");if(x(R))return R.size==0?"new Set()":"new Set("+A(Array.from(R),j)+")";if(d(R))return R.length==0?"Buffer.from([])":"Buffer.from("+A(Array.from(R),j)+")";if(c(R))return Y=[],j.wrap=!0,q&&(j.__inline1__=!1,j.__inline2__=!0),G||O(),a(R,te=>{Z=!1,G&&(j.__inline2__=!1),Y.push((N||G?"":B)+A(te,j))}),Z?"[]":G?"["+Y.join(", ")+"]":"["+U+Y.join(","+U)+U+(N?"":F)+"]";if(f(R)||g(R)){if(L)return JSON.stringify(Number(R));let te;if(K)te=String(R);else if(Q){let re=R.toString(16);V||(re=re.toUpperCase()),te="0x"+re}else I?te="0b"+R.toString(2):W&&(te="0o"+R.toString(8));return g(R)?te+"n":te}else return g(R)?L?JSON.stringify(Number(R)):R+"n":u(R)?(Y=[],j.wrap=!0,O(),n(R,(te,re)=>{Z=!1,Y.push((N?"":B)+A(te,j)+":"+(N?"":" ")+A(re,j))}),Z?"{}":"{"+U+Y.join(","+U)+U+(N?"":F)+"}"):L?JSON.stringify(R)||"null":String(R)}const ae=j.escapeEverything?z:T;return Y=R.replace(ae,(te,re,ue,_e,ce,pe)=>{if(re){if(j.minimal)return re;const De=re.charCodeAt(0),Be=re.charCodeAt(1);if(j.es6){const Je=(De-55296)*1024+Be-56320+65536;return"\\u{"+l(Je,V)+"}"}return i(l(De,V))+i(l(Be,V))}if(ue)return i(l(ue.charCodeAt(0),V));if(te=="\0"&&!L&&!_.test(pe.charAt(ce+1)))return"\\0";if(_e)return _e==H||j.escapeEverything?"\\"+_e:_e;if(C.test(te))return k[te];if(j.minimal&&!$.test(te))return te;const xe=l(te.charCodeAt(0),V);return L||xe.length>2?i(xe):"\\x"+("00"+xe).slice(-2)}),H=="`"&&(Y=Y.replace(/\$\{/g,"\\${")),j.isScriptContext&&(Y=Y.replace(/<\/(script|style)/gi,"<\\/$1").replace(/<!--/g,L?"\\u003C!--":"\\x3C!--")),j.wrap&&(Y=H+Y+H),Y};return A.version="3.0.2",BT=A,BT}Git();function Yit({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 Xit(){const e=Fp(),r=(e.options.getScrollRestorationKey||cie)(e.latestLocation),n=r!==cie(e.latestLocation)?r:null;return!e.isScrollRestoring||!e.isServer?null:y.jsx(Yit,{children:`(${Ait.toString()})(${JSON.stringify(lie)},${JSON.stringify(n)}, undefined, true)`,log:!1})}const Zit=S.memo(function({matchId:e}){var r,n;const o=Fp(),a=Sl({select:x=>{var k;return(k=x.matches.find(C=>C.id===e))==null?void 0:k.routeId}});Z4(a);const i=o.routesById[a],l=i.options.pendingComponent??o.options.defaultPendingComponent,s=l?y.jsx(l,{}):null,c=i.options.errorComponent??o.options.defaultErrorComponent,d=i.options.onCatch??o.options.defaultOnCatch,u=i.isRoot?i.options.notFoundComponent??((r=o.options.notFoundRoute)==null?void 0:r.options.component):i.options.notFoundComponent,p=(!i.isRoot||i.options.wrapInSuspense)&&(i.options.wrapInSuspense??l??((n=i.options.errorComponent)==null?void 0:n.preload))?S.Suspense:PT,f=c?uie:PT,g=u?Uit:PT,v=Sl({select:x=>x.loadedAt}),w=Sl({select:x=>{var k;const C=x.matches.findIndex(_=>_.id===e);return(k=x.matches[C-1])==null?void 0:k.routeId}});return y.jsxs(y.Fragment,{children:[y.jsx(xie.Provider,{value:e,children:y.jsx(p,{fallback:s,children:y.jsx(f,{getResetKey:()=>v,errorComponent:c||AT,onCatch:(x,k)=>{if(J4(x))throw x;d?.(x,k)},children:y.jsx(g,{fallback:x=>{if(!u||x.routeId&&x.routeId!==a||!x.routeId&&!i.isRoot)throw x;return S.createElement(u,x)},children:y.jsx(Qit,{matchId:e})})})})}),w===die&&o.options.scrollRestoration?y.jsxs(y.Fragment,{children:[y.jsx(Kit,{}),y.jsx(Xit,{})]}):null]})});function Kit(){var e;const r=Fp(),n=S.useRef(void 0);return y.jsx("script",{suppressHydrationWarning:!0,ref:o=>{var a;o&&(n.current===void 0||n.current.href!==((a=r.state.resolvedLocation)==null?void 0:a.href))&&(r.emit({type:"onRendered",...Nit(r.state)}),n.current=r.state.resolvedLocation)}},(e=r.state.resolvedLocation)==null?void 0:e.state.key)}const Qit=S.memo(function({matchId:e}){var r,n,o;const a=Fp(),{match:i,key:l,routeId:s}=Sl({select:p=>{const f=p.matches.findIndex(k=>k.id===e),g=p.matches[f],v=g.routeId,w=a.routesById[v].options.remountDeps??a.options.defaultRemountDeps,x=w?.({routeId:v,loaderDeps:g.loaderDeps,params:g._strictParams,search:g._strictSearch});return{key:x?JSON.stringify(x):void 0,routeId:v,match:Rit(g,["id","status","error"])}},structuralSharing:!0}),c=a.routesById[s],d=S.useMemo(()=>{const p=c.options.component??a.options.defaultComponent;return p?y.jsx(p,{},l):y.jsx(Jit,{})},[l,c.options.component,a.options.defaultComponent]),u=(c.options.errorComponent??a.options.defaultErrorComponent)||AT;if(i.status==="notFound")return Z4(J4(i.error)),wie(a,c,i.error);if(i.status==="redirected")throw Z4(Dit(i.error)),(r=a.getMatch(i.id))==null?void 0:r.loadPromise;if(i.status==="error"){if(a.isServer)return y.jsx(u,{error:i.error,reset:void 0,info:{componentStack:""}});throw i.error}if(i.status==="pending"){const p=c.options.pendingMinMs??a.options.defaultPendingMinMs;if(p&&!((n=a.getMatch(i.id))!=null&&n.minPendingPromise)&&!a.isServer){const f=Tit();Promise.resolve().then(()=>{a.updateMatch(i.id,g=>({...g,minPendingPromise:f}))}),setTimeout(()=>{f.resolve(),a.updateMatch(i.id,g=>({...g,minPendingPromise:void 0}))},p)}throw(o=a.getMatch(i.id))==null?void 0:o.loadPromise}return d}),Jit=S.memo(function(){const e=Fp(),r=S.useContext(xie),n=Sl({select:c=>{var d;return(d=c.matches.find(u=>u.id===r))==null?void 0:d.routeId}}),o=e.routesById[n],a=Sl({select:c=>{const d=c.matches.find(u=>u.id===r);return Z4(d),d.globalNotFound}}),i=Sl({select:c=>{var d;const u=c.matches,p=u.findIndex(f=>f.id===r);return(d=u[p+1])==null?void 0:d.id}});if(a)return wie(e,o,void 0);if(!i)return null;const l=y.jsx(Zit,{matchId:i}),s=e.options.defaultPendingComponent?y.jsx(e.options.defaultPendingComponent,{}):null;return r===die?y.jsx(S.Suspense,{fallback:s,children:l}):l}),elt=typeof window<"u"?S.useLayoutEffect:S.useEffect;function tlt(e,r,n={},o={}){const a=S.useRef(typeof IntersectionObserver=="function"),i=S.useRef(null);return S.useEffect(()=>{if(!(!e.current||!a.current||o.disabled))return i.current=n
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
`).replace(`
`,`
+`).split(`
`)),d=c.reduce((u,p)=>u.concat(...p),[]);return[c,d]}return[[],[]]},[e]);return S.useEffect(()=>{const c=r?.target??vse,d=r?.actInsideInputWithModifier??!0;if(e!==null){const u=g=>{if(a.current=g.ctrlKey||g.metaKey||g.shiftKey||g.altKey,(!a.current||a.current&&!d)&&Dle(g))return!1;const v=xse(g.code,s);if(i.current.add(g[v]),bse(l,i.current,!1)){const w=g.composedPath?.()?.[0]||g.target,x=w?.nodeName==="BUTTON"||w?.nodeName==="A";r.preventDefault!==!1&&(a.current||!x)&&g.preventDefault(),o(!0)}},p=g=>{const v=xse(g.code,s);bse(l,i.current,!0)?(o(!1),i.current.clear()):i.current.delete(g[v]),g.key==="Meta"&&i.current.clear(),a.current=!1},f=()=>{i.current.clear(),o(!1)};return c?.addEventListener("keydown",u),c?.addEventListener("keyup",p),window.addEventListener("blur",f),window.addEventListener("contextmenu",f),()=>{c?.removeEventListener("keydown",u),c?.removeEventListener("keyup",p),window.removeEventListener("blur",f),window.removeEventListener("contextmenu",f)}}},[e,o]),n}function bse(e,r,n){return e.filter(o=>n||o.length===r.size).some(o=>o.every(a=>r.has(a)))}function xse(e,r){return r.includes(e)?"code":"key"}const spt=()=>{const e=qr();return S.useMemo(()=>({zoomIn:r=>{const{panZoom:n}=e.getState();return n?n.scaleBy(1.2,{duration:r?.duration}):Promise.resolve(!1)},zoomOut:r=>{const{panZoom:n}=e.getState();return n?n.scaleBy(1/1.2,{duration:r?.duration}):Promise.resolve(!1)},zoomTo:(r,n)=>{const{panZoom:o}=e.getState();return o?o.scaleTo(r,{duration:n?.duration}):Promise.resolve(!1)},getZoom:()=>e.getState().transform[2],setViewport:async(r,n)=>{const{transform:[o,a,i],panZoom:l}=e.getState();return l?(await l.setViewport({x:r.x??o,y:r.y??a,zoom:r.zoom??i},n),Promise.resolve(!0)):Promise.resolve(!1)},getViewport:()=>{const[r,n,o]=e.getState().transform;return{x:r,y:n,zoom:o}},setCenter:async(r,n,o)=>e.getState().setCenter(r,n,o),fitBounds:async(r,n)=>{const{width:o,height:a,minZoom:i,maxZoom:l,panZoom:s}=e.getState(),c=aj(r,o,a,i,l,n?.padding??.1);return s?(await s.setViewport(c,{duration:n?.duration,ease:n?.ease,interpolate:n?.interpolate}),Promise.resolve(!0)):Promise.resolve(!1)},screenToFlowPosition:(r,n={})=>{const{transform:o,snapGrid:a,snapToGrid:i,domNode:l}=e.getState();if(!l)return r;const{x:s,y:c}=l.getBoundingClientRect(),d={x:r.x-s,y:r.y-c},u=n.snapGrid??a,p=n.snapToGrid??i;return Q0(d,o,p,u)},flowToScreenPosition:r=>{const{transform:n,domNode:o}=e.getState();if(!o)return r;const{x:a,y:i}=o.getBoundingClientRect(),l=Ck(r,n);return{x:l.x+a,y:l.y+i}}}),[])};function wse(e,r){const n=[],o=new Map,a=[];for(const i of e)if(i.type==="add"){a.push(i);continue}else if(i.type==="remove"||i.type==="replace")o.set(i.id,[i]);else{const l=o.get(i.id);l?l.push(i):o.set(i.id,[i])}for(const i of r){const l=o.get(i.id);if(!l){n.push(i);continue}if(l[0].type==="remove")continue;if(l[0].type==="replace"){n.push({...l[0].item});continue}const s={...i};for(const c of l)cpt(c,s);n.push(s)}return a.length&&a.forEach(i=>{i.index!==void 0?n.splice(i.index,0,{...i.item}):n.push({...i.item})}),n}function cpt(e,r){switch(e.type){case"select":{r.selected=e.selected;break}case"position":{typeof e.position<"u"&&(r.position=e.position),typeof e.dragging<"u"&&(r.dragging=e.dragging);break}case"dimensions":{typeof e.dimensions<"u"&&(r.measured={...e.dimensions},e.setAttributes&&((e.setAttributes===!0||e.setAttributes==="width")&&(r.width=e.dimensions.width),(e.setAttributes===!0||e.setAttributes==="height")&&(r.height=e.dimensions.height))),typeof e.resizing=="boolean"&&(r.resizing=e.resizing);break}}}function dpt(e,r){return wse(e,r)}function upt(e,r){return wse(e,r)}function Xp(e,r){return{id:e,type:"select",selected:r}}function og(e,r=new Set,n=!1){const o=[];for(const[a,i]of e){const l=r.has(a);!(i.selected===void 0&&!l)&&i.selected!==l&&(n&&(i.selected=l),o.push(Xp(i.id,l)))}return o}function kse({items:e=[],lookup:r}){const n=[],o=new Map(e.map(a=>[a.id,a]));for(const[a,i]of e.entries()){const l=r.get(i.id),s=l?.internals?.userNode??l;s!==void 0&&s!==i&&n.push({id:i.id,item:i,type:"replace"}),s===void 0&&n.push({item:i,type:"
M${R.x},${R.y}h${R.width}v${R.height}h${-R.width}z`,fillRule:"evenodd",pointerEvents:"none"})]})})}cce.displayName="MiniMap",S.memo(cce);const eft=e=>r=>e?`${Math.max(1/r.transform[2],1)}`:void 0,tft={[ng.Line]:"right",[ng.Handle]:"bottom-right"};function rft({nodeId:e,position:r,variant:n=ng.Handle,className:o,style:a=void 0,children:i,color:l,minWidth:s=10,minHeight:c=10,maxWidth:d=Number.MAX_VALUE,maxHeight:u=Number.MAX_VALUE,keepAspectRatio:p=!1,resizeDirection:f,autoScale:g=!0,shouldResize:v,onResizeStart:w,onResize:x,onResizeEnd:k}){const C=jse(),_=typeof e=="string"?e:C,$=qr(),z=S.useRef(null),T=n===ng.Handle,A=Jt(S.useCallback(eft(T&&g),[T,g]),Vr),R=S.useRef(null),j=r??tft[n];S.useEffect(()=>{if(!(!z.current||!_))return R.current||(R.current=But({domNode:z.current,nodeId:_,getStoreItems:()=>{const{nodeLookup:P,transform:L,snapGrid:H,snapToGrid:N,nodeOrigin:V,domNode:B}=$.getState();return{nodeLookup:P,transform:L,snapGrid:H,snapToGrid:N,nodeOrigin:V,paneDomNode:B}},onChange:(P,L)=>{const{triggerNodeChanges:H,nodeLookup:N,parentLookup:V,nodeOrigin:B}=$.getState(),F=[],q={x:P.x,y:P.y},G=N.get(_);if(G&&G.expandParent&&G.parentId){const U=G.origin??B,Y=P.width??G.measured.width??0,Z=P.height??G.measured.height??0,I={id:G.id,parentId:G.parentId,rect:{width:Y,height:Z,...Tle({x:P.x??G.position.x,y:P.y??G.position.y},{width:Y,height:Z},G.parentId,N,U)}},W=fj([I],N,V,B);F.push(...W),q.x=P.x?Math.max(U[0]*Y,P.x):void 0,q.y=P.y?Math.max(U[1]*Z,P.y):void 0}if(q.x!==void 0&&q.y!==void 0){const U={id:_,type:"position",position:{...q}};F.push(U)}if(P.width!==void 0&&P.height!==void 0){const U={id:_,type:"dimensions",resizing:!0,setAttributes:f?f==="horizontal"?"width":"height":!0,dimensions:{width:P.width,height:P.height}};F.push(U)}for(const U of L){const Y={...U,type:"position"};F.push(Y)}H(F)},onEnd:({width:P,height:L})=>{const H={id:_,type:"dimensions",resizing:!1,dimensions:{width:P,height:L}};$.getState().triggerNodeChanges([H])}})),R.current.update({controlPosition:j,boundaries:{minWidth:s,minHeight:c,maxWidth:d,maxHeight:u},keepAspectRatio:p,resizeDirection:f,onResizeStart:w,onResize:x,onResizeEnd:k,shouldResize:v}),()=>{R.current?.destroy()}},[j,s,c,d,u,p,w,x,k,v]);const O=j.split("-");return y.jsx("div",{className:jn(["react-flow__resize-control","nodrag",...O,n,o]),ref:z,style:{...a,scale:A,...l&&{[T?"backgroundColor":"borderColor"]:l}},children:i})}S.memo(rft);var nft=Object.getOwnPropertyNames,oft=Object.getOwnPropertySymbols,aft=Object.prototype.hasOwnProperty;function dce(e,r){return function(n,o,a){return e(n,o,a)&&r(n,o,a)}}function Ok(e){return function(r,n,o){if(!r||!n||typeof r!="object"||typeof n!="object")return e(r,n,o);var a=o.cache,i=a.get(r),l=a.get(n);if(i&&l)return i===n&&l===r;a.set(r,n),a.set(n,r);var s=e(r,n,o);return a.delete(r),a.delete(n),s}}function ift(e){return e?.[Symbol.toStringTag]}function uce(e){return nft(e).concat(oft(e))}var lft=Object.hasOwn||(function(e,r){return aft.call(e,r)});function Zp(e,r){return e===r||!e&&!r&&e!==e&&r!==r}var sft="__v",cft="__o",dft="_owner",pce=Object.getOwnPropertyDescriptor,hce=Object.keys;function uft(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 pft(e,r){return Zp(e.getTime(),r.getTime())}function hft(e,r){return e.name===r.name&&e.message===r.message&&e.cause===r.cause&&e.stack===r.stack}function fft(e,r){return e===r}function fce(e,r,n){var o=e.size;if(o!==r.size)return!1;if(!o)return!0;for(var a=new Array(o),i=e.entries(),l,s,c=0;(l=i.next())&&!l.done;){for(var d=r.entries(),u=!1,p=0;(s=d.next())&&!s.done;){if(a[p]){p++;continue}var f=l.value,g=s.value;if(n.equals(f[0],g[0],c,p,e,r,n)&&n.equals(f[1],g[1],f[0],g[0],e,r,n)){u=a[p]=!0;break}p++}if(!u)return!1;c++}return!0}var mft=Zp;function gft(e,r,n){var o=hce(e),a=o.length;if(hce(r).length!==a)return!1;for(;a-- >0;)if(!gce(e,r,n,o[a]))return!1;return!0}function rv(e,r,n){var o=uce(e),a=o.length;if(uce(r).length!==a)return!1;for(var i,l,s;a-- >0;)if(i=o[a],!gce(e,r,n,i)||(l=pce(e,i),s=pce(r,i),(l||s)&&(!l||!s||l.conf
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
`).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 b1t={major:4,minor:0,patch:0},an=Te("$ZodType",(e,r)=>{var n;e??(e={}),e._zod.def=r,e._zod.bag=e._zod.bag||{},e._zod.version=b1t;const o=[...e._zod.def.checks??[]];e._zod.traits.has("$ZodCheck")&&o.unshift(e);for(const a of o)for(const i of a._zod.onattach)i(e);if(o.length===0)(n=e._zod).deferred??(n.deferred=[]),e._zod.deferred?.push(()=>{e._zod.run=e._zod.parse});else{const a=(i,l,s)=>{let c=fv(i),d;for(const u of l){if(u._zod.def.when){if(!u._zod.def.when(i))continue}else if(c)continue;const p=i.issues.length,f=u._zod.check(i);if(f instanceof Promise&&s?.async===!1)throw new uv;if(d||f instanceof Promise)d=(d??Promise.resolve()).then(async()=>{await f,i.issues.length!==p&&(c||(c=fv(i,p)))});else{if(i.issues.length===p)continue;c||(c=fv(i,p))}}return d?d.then(()=>i):i};e._zod.run=(i,l)=>{const s=e._zod.parse(i,l);if(s instanceof Promise){if(l.async===!1)throw new uv;return s.then(c=>a(c,o,l))}return a(s,o,l)}}e["~standard"]={validate:a=>{try{const i=Mgt(e,a);return i.success?{value:i.data}:{issues:i.error?.issues}}catch{return Pgt(e,a).then(i=>i.success?{value:i.data}:{issues:i.error?.issues})}},vendor:"zod",version:1}}),Jk=Te("$ZodString",(e,r)=>{an.init(e,r),e._zod.pattern=[...e?._zod.bag?.patterns??[]].pop()??o1t(e._zod.bag),e._zod.parse=(n,o)=>{if(r.coerce)try{n.value=String(n.value)}catch{}return typeof n.value=="string"||n.issues.push({expected:"string",code:"invalid_type",input:n.value,inst:e}),n}}),Ur=Te("$ZodStringFormat",(e,r)=>{Qk.init(e,r),Jk.init(e,r)}),x1t=Te("$ZodGUID",(e,r)=>{r.pattern??(r.pattern=Hgt),Ur.init(e,r)}),w1t=Te("$ZodUUID",(e,r)=>{if(r.version){const n={v1:1,v2:2,v3:3,v4:4,v5:5,v6:6,v7:7,v8:8}[r.version];if(n===void 0)throw new Error(`Invalid UUID version: "${r.version}"`);r.pattern??(r.pattern=Sue(n))}else r.pattern??(r.pattern=Sue());Ur.init(e,r)}),k1t=Te("$ZodEmail",(e,r)=>{r.pattern??(r.pattern=Ugt),Ur.init(e,r)}),_1t=Te("$ZodURL",(e,r)=>{Ur.init(e,r),e._zod.check=n=>{try{const o=n.value,a=new URL(o),i=a.href;r.hostname&&(r.hostname.lastIndex=0,r.hostname.test(a.hostname)||n.issues.push({code:"invalid_format",format:"url",note:"Invalid hostname",pattern:Jgt.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})}}}),S1t=Te("$ZodEmoji",(e,r)=>{r.pattern??(r.pattern=Ggt()),Ur.init(e,r)}),E1t=Te("$ZodNanoID",(e,r)=>{r.pattern??(r.pattern=Vgt),Ur.init(e,r)}),C1t=Te("$ZodCUID",(e,r)=>{r.pattern??(r.pattern=Bgt),Ur.init(e,r)}),$1t=Te("$ZodCUID2",(e,r)=>{r.pattern??(r.pattern=Ogt),Ur.init(e,r)}),z1t=Te("$ZodULID",(e,r)=>{r.pattern??(r.pattern=Igt),Ur.init(e,r)}),R1t=Te("$ZodXID",(e,r)=>{r.pattern??(r.pattern=Lgt),Ur.init(e,r)}),T1t=Te("$ZodKSUID",(e,r)=>{r.pattern??(r.pattern=Fgt),Ur.init(e,r)}),j1t=Te("$ZodISODateTime",(e,r)=>{r.pattern??(r.pattern=n1t(r)),Ur.init(e,r)}),A1t=Te("$ZodISODate",(e,r)=>{r.pattern??(r.pattern=t1t),Ur.init(e,r)}),D1t=Te("$ZodISOTime",(e,r)=>{r.pattern??(r.pattern=r1t(r)),Ur.init(e,r)}),N1t=Te("$ZodISODuration",(e,r)=>{r.pattern??(r.pattern=qgt),Ur.init(e,r)}),M1t=Te("$ZodIPv4",(e,r)=>{r.pattern??(r.pattern=Ygt),Ur.init(e,r),e._zod.onattach.push(n=>{const o=n._zod.bag;o.format="ipv4"})}),P1t=Te("$ZodIPv6",(e,r)=>{r.pattern??(r.pattern=Xgt),Ur.init(e,r),e._zod.onattach.push(n=>{const o=n._zod.bag;o.format="ipv6"}),e._zod.check=n=>{try{new URL(`http://[${n.value}]`)}catch{n.issues.push({code:"invalid_format",format:"ipv6",input:n.value,inst:e,continue:!r.abort})}}}),B1t=Te("$ZodCIDRv4",(e,r)=>{r.pattern??(r.pattern=Zgt),Ur.init(e,r)}),O1t=Te("$ZodCIDRv6",(e,r)=>{r.pattern??(r.pattern=Kgt),Ur.init(e,r),e._zod.check=n=>{const[o,a]=n.value.split("/");try{if(!a)throw new Error;const i=Number(a);if(`${i}`!==a)throw new Error;if(i<0||i>128)throw new Err
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
if (${C}.issues.length) {
if (input[${_}] === undefined) {
if (${_} in input) {
newResult[${_}] = undefined;
}
} else {
payload.issues = payload.issues.concat(
${C}.issues.map((iss) => ({
...iss,
path: iss.path ? [${_}, ...iss.path] : [${_}],
}))
);
}
} else if (${C}.value === undefined) {
if (${_} in input) newResult[${_}] = undefined;
} else {
newResult[${_}] = ${C}.value;
}
2025-12-16 12:13:34 +01:00
`)}else{const C=v[k];p.write(`const ${C} = ${g(k)};`),p.write(`
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
if (${C}.issues.length) payload.issues = payload.issues.concat(${C}.issues.map(iss => ({
...iss,
2025-12-16 12:13:34 +01:00
path: iss.path ? [${pv(k)}, ...iss.path] : [${pv(k)}]
})));`),p.write(`newResult[${pv(k)}] = ${C}.value`)}p.write("payload.value = newResult;"),p.write("return payload;");const x=p.compile();return(k,C)=>x(u,k,C)};let a;const i=PA,l=!mue.jitless,s=l&&_gt.value,c=r.catchall;let d;e._zod.parse=(u,p)=>{d??(d=n.value);const f=u.value;if(!i(f))return u.issues.push({expected:"object",code:"invalid_type",input:f,inst:e}),u;const g=[];if(l&&s&&p?.async===!1&&p.jitless!==!0)a||(a=o(r.shape)),u=a(u,p);else{u.value={};const C=d.shape;for(const _ of d.keys){const $=C[_],z=$._zod.run({value:f[_],issues:[]},p),T=$._zod.optin==="optional"&&$._zod.optout==="optional";z instanceof Promise?g.push(z.then(A=>T?jue(A,u,_,f):e5(A,u,_))):T?jue(z,u,_,f):e5(z,u,_)}}if(!c)return g.length?Promise.all(g).then(()=>u):u;const v=[],w=d.keySet,x=c._zod,k=x.def.type;for(const C of Object.keys(f)){if(w.has(C))continue;if(k==="never"){v.push(C);continue}const _=x.run({value:f[C],issues:[]},p);_ instanceof Promise?g.push(_.then($=>e5($,u,C))):e5(_,u,C)}return v.length&&u.issues.push({code:"unrecognized_keys",keys:v,input:f,inst:e}),g.length?Promise.all(g).then(()=>u):u}});function Aue(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,nh())))}),r}const X1t=Te("$ZodUnion",(e,r)=>{an.init(e,r),Hr(e._zod,"optin",()=>r.options.some(n=>n._zod.optin==="optional")?"optional":void 0),Hr(e._zod,"optout",()=>r.options.some(n=>n._zod.optout==="optional")?"optional":void 0),Hr(e._zod,"values",()=>{if(r.options.every(n=>n._zod.values))return new Set(r.options.flatMap(n=>Array.from(n._zod.values)))}),Hr(e._zod,"pattern",()=>{if(r.options.every(n=>n._zod.pattern)){const n=r.options.map(o=>o._zod.pattern);return new RegExp(`^(${n.map(o=>NA(o.source)).join("|")})$`)}}),e._zod.parse=(n,o)=>{let a=!1;const i=[];for(const l of r.options){const s=l._zod.run({value:n.value,issues:[]},o);if(s instanceof Promise)i.push(s),a=!0;else{if(s.issues.length===0)return s;i.push(s)}}return a?Promise.all(i).then(l=>Aue(l,n,e,o)):Aue(i,n,e,o)}}),Z1t=Te("$ZodIntersection",(e,r)=>{an.init(e,r),e._zod.parse=(n,o)=>{const a=n.value,i=r.left._zod.run({value:a,issues:[]},o),l=r.right._zod.run({value:a,issues:[]},o);return i instanceof Promise||l instanceof Promise?Promise.all([i,l]).then(([s,c])=>Due(n,s,c)):Due(n,i,l)}});function LA(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(BA(e)&&BA(r)){const n=Object.keys(r),o=Object.keys(e).filter(i=>n.indexOf(i)!==-1),a={...e,...r};for(const i of o){const l=LA(e[i],r[i]);if(!l.valid)return{valid:!1,mergeErrorPath:[i,...l.mergeErrorPath]};a[i]=l.data}return{valid:!0,data:a}}if(Array.isArray(e)&&Array.isArray(r)){if(e.length!==r.length)return{valid:!1,mergeErrorPath:[]};const n=[];for(let o=0;o<e.length;o++){const a=e[o],i=r[o],l=LA(a,i);if(!l.valid)return{valid:!1,mergeErrorPath:[o,...l.mergeErrorPath]};n.push(l.data)}return{valid:!0,data:n}}return{valid:!1,mergeErrorPath:[]}}function Due(e,r,n){if(r.issues.length&&e.issues.push(...r.issues),n.issues.length&&e.issues.push(...n.issues),fv(e))return e;const o=LA(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 K1t=Te("$ZodEnum",(e,r)=>{an.init(e,r);const n=wgt(r.entries);e._zod.values=new Set(n),e._zod.pattern=new RegExp(`^(${n.filter(o=>Sgt.has(typeof o)).map(o=>typeof o=="string"?hv(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}}),Q1t=Te("$ZodLiteral",(e,r)=>{an.init(e,r),e._zod.values=new Set(r.values),e._zod.pattern=new RegExp(`^(${r.values.map(n=>typeof n=="string"?hv(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}}),Nue=Te("$ZodTransform",(e,r)=>{an.init(e,r),e._zod.parse=(n,o)=>{const a=r.transform(n.value,n
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
:host {
display: block;
position: relative;
background-color: transparent;
width: 100%;
height: 100%;
box-sizing: border-box;
overflow: hidden;
border: 0px solid transparent;
padding: 0;
2025-12-16 12:13:34 +01:00
}`;r!==this.lastHostCss&&(this.hostCss?.replaceSync(r),this.lastHostCss=r)}connectedCallback(){this.lastHostCss="",this.hostCss=new CSSStyleSheet,this.updateHostCss(),this.shadow.adoptedStyleSheets=[this.hostCss],this.render()}disconnectedCallback(){this.root?.unmount(),this.root=void 0,this.shadow.adoptedStyleSheets.length=0,this.hostCss=void 0}static observedAttributes=["view-id","browser","dynamic-variant"];getProps(){const r=ovt.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",wue(r.error)),{viewId:"index"})}render(){const r=this.getProps();this.updateHostCss(),this.root??=qQe.createRoot(this.shadow),this.root.render(y.jsx(OQe,{...r}))}attributeChangedCallback(r){this.root&&this.render()}}return customElements.define(HQe.View,tpe),h6.LikeC4View=tpe,Object.defineProperty(h6,Symbol.toStringTag,{value:"Module"}),h6})({});
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the 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 */