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

394 lines
2.9 MiB
JavaScript
Raw Normal View History

var LikeC4Views=(function(Y6){"use strict";/* prettier-ignore-start */
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
/* eslint-disable */
/******************************************************************************
* This file was generated
* DO NOT EDIT MANUALLY!
******************************************************************************/
function Lge(e,r){for(var n=0;n<r.length;n++){const o=r[n];if(typeof o!="string"&&!Array.isArray(o)){for(const a in o)if(a!=="default"&&!(a in e)){const i=Object.getOwnPropertyDescriptor(o,a);i&&Object.defineProperty(e,a,i.get?i:{enumerable:!0,get:()=>o[a]})}}}return Object.freeze(Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}))}function LN(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var X6={exports:{}},Xg={};var FN;function Fge(){if(FN)return Xg;FN=1;var e=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function n(o,a,i){var l=null;if(i!==void 0&&(l=""+i),a.key!==void 0&&(l=""+a.key),"key"in a){i={};for(var s in a)s!=="key"&&(i[s]=a[s])}else i=a;return a=i.ref,{$$typeof:e,type:o,key:l,ref:a!==void 0?a:null,props:i}}return Xg.Fragment=r,Xg.jsx=n,Xg.jsxs=n,Xg}var VN;function Vge(){return VN||(VN=1,X6.exports=Fge()),X6.exports}var y=Vge(),Z6={exports:{}},$t={};var qN;function qge(){if(qN)return $t;qN=1;var e=Symbol.for("react.transitional.element"),r=Symbol.for("react.portal"),n=Symbol.for("react.fragment"),o=Symbol.for("react.strict_mode"),a=Symbol.for("react.profiler"),i=Symbol.for("react.consumer"),l=Symbol.for("react.context"),s=Symbol.for("react.forward_ref"),c=Symbol.for("react.suspense"),d=Symbol.for("react.memo"),u=Symbol.for("react.lazy"),p=Symbol.for("react.activity"),f=Symbol.iterator;function g(Y){return Y===null||typeof Y!="object"?null:(Y=f&&Y[f]||Y["@@iterator"],typeof Y=="function"?Y:null)}var v={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},w=Object.assign,x={};function k(Y,Z,O){this.props=Y,this.context=Z,this.refs=x,this.updater=O||v}k.prototype.isReactComponent={},k.prototype.setState=function(Y,Z){if(typeof Y!="object"&&typeof Y!="function"&&Y!=null)throw Error("takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,Y,Z,"setState")},k.prototype.forceUpdate=function(Y){this.updater.enqueueForceUpdate(this,Y,"forceUpdate")};function C(){}C.prototype=k.prototype;function _(Y,Z,O){this.props=Y,this.context=Z,this.refs=x,this.updater=O||v}var $=_.prototype=new C;$.constructor=_,w($,k.prototype),$.isPureReactComponent=!0;var R=Array.isArray;function T(){}var A={H:null,A:null,T:null,S:null},z=Object.prototype.hasOwnProperty;function j(Y,Z,O){var W=O.ref;return{$$typeof:e,type:Y,key:Z,ref:W!==void 0?W:null,props:O}}function I(Y,Z){return j(Y.type,Z,Y.props)}function P(Y){return typeof Y=="object"&&Y!==null&&Y.$$typeof===e}function L(Y){var Z={"=":"=0",":":"=2"};return"$"+Y.replace(/[=:]/g,function(O){return Z[O]})}var H=/\/+/g;function M(Y,Z){return typeof Y=="object"&&Y!==null&&Y.key!=null?L(""+Y.key):Z.toString(36)}function V(Y){switch(Y.status){case"fulfilled":return Y.value;case"rejected":throw Y.reason;default:switch(typeof Y.status=="string"?Y.then(T,T):(Y.status="pending",Y.then(function(Z){Y.status==="pending"&&(Y.status="fulfilled",Y.value=Z)},function(Z){Y.status==="pending"&&(Y.status="rejected",Y.reason=Z)})),Y.status){case"fulfilled":return Y.value;case"rejected":throw Y.reason}}throw Y}function B(Y,Z,O,W,K){var Q=typeof Y;(Q==="undefined"||Q==="boolean")&&(Y=null);var ae=!1;if(Y===null)ae=!0;else switch(Q){case"bigint":case"string":case"number":ae=!0;break;case"object":switch(Y.$$typeof){case e:case r:ae=!0;break;case u:return ae=Y._init,B(ae(Y._payload),Z,O,W,K)}}if(ae)return K=K(Y),ae=W===""?"."+M(Y,0):W,R(K)?(O="",ae!=null&&(O=ae.replace(H,"$&/")+"/"),B(K,Z,O,"",function(ue){return ue})):K!=null&&(P(K)&&(K=I(K,O+(K.key==null||Y&&Y.key===K.key?"":(""+K.key).replace(H,"$&/")+"/")+ae)),Z.push(K)),1;ae=0;var te=W===""?".":W+":";if(R(Y))for(var re=0;re<Y.length;re++)W=Y[re],Q=te+M(W,re),ae+=B(W,Z,O,Q,K);else if(re=g(Y),typeof re=="function")for(Y=re.call(Y),re=0;!(W=Y.next()).done;)W=W.value,Q=te+M(W,re++),ae+=B(W,Z,O,Q,K);else if(Q==="object"){if(typeof Y.then=="function")return B(V(Y),Z,O,W,K);throw Z=String(Y),Error("Objects are not valid as a React chi
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
\f\r &/=>`.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 Cve(e,r,n,o){const a=o.schema,i=a.space==="svg"?!1:o.settings.omitOptionalTags;let l=a.space==="svg"?o.settings.closeEmptyElements:o.settings.voids.includes(e.tagName.toLowerCase());const s=[];let c;a.space==="html"&&e.tagName==="svg"&&(o.schema=AB);const d=$ve(o,e.properties),u=o.all(a.space==="html"&&e.tagName==="template"?e.content:e);return o.schema=a,u&&(l=!1),(d||!i||!xve(e,r,n))&&(s.push("<",e.tagName,d?" "+d:""),l&&(a.space==="svg"||o.settings.closeSelfClosing)&&(c=d.charAt(d.length-1),(!o.settings.tightSelfClosing||c==="/"||c&&c!=='"'&&c!=="'")&&s.push(" "),s.push("/")),s.push(">")),s.push(u),!l&&(!i||!V_(e,r,n))&&s.push("</"+e.tagName+">"),s.join("")}function $ve(e,r){const n=[];let o=-1,a;if(r){for(a in r)if(r[a]!==null&&r[a]!==void 0){const i=Rve(e,a,r[a]);i&&n.push(i)}}for(;++o<n.length;){const i=e.settings.tightAttributes?n[o].charAt(n[o].length-1):void 0;o!==n.length-1&&i!=='"'&&i!=="'"&&(n[o]+=" ")}return n.join("")}function Rve(e,r,n){const o=j0e(e.schema,r),a=e.settings.allowParseErrors&&e.schema.space==="html"?0:1,i=e.settings.allowDangerousCharacters?0:1;let l=e.quote,s;if(o.overloadedBoolean&&(n===o.attribute||n==="")?n=!0:(o.boolean||o.overloadedBoolean)&&(typeof n!="string"||n===o.attribute||n==="")&&(n=!!n),n==null||n===!1||typeof n=="number"&&Number.isNaN(n))return"";const c=Lh(o.attribute,Object.assign({},e.settings.characterReferences,{subset:Ib.name[a][i]}));return n===!0||(n=Array.isArray(n)?(o.commaSeparated?nve:ove)(n,{padLeft:!e.settings.tightCommaSeparatedLists}):String(n),e.settings.collapseEmptyAttributes&&!n)?c:(e.settings.preferUnquoted&&(s=Lh(n,Object.assign({},e.settings.characterReferences,{attribute:!0,subset:Ib.unquoted[a][i]}))),s!==n&&(e.settings.quoteSmart&&Bb(n,l)>Bb(n,e.alternative)&&(l=e.alternative),s=l+Lh(n,Object.assign({},e.settings.characterReferences,{subset:(l==="'"?Ib.single:Ib.double)[a][i],attribute:!0}))+l),c+(s&&"="+s))}const zve=["<","&"];function VB(e,r,n,o){return n&&n.type==="element"&&(n.tagName==="script"||n.tagName==="style")?e.value:Lh(e.value,Object.assign({},o.settings.characterReferences,{subset:zve}))}function Tve(e,r,n,o){return o.settings.allowDangerousHtml?e.value:VB(e,r,n,o)}function jve(e,r,n,o){return o.all(e)}const Ave=N0e("type",{invalid:Dve,unknown:Mve,handlers:{comment:tve,doctype:rve,element:Cve,raw:Tve,root:jve,text:VB}});function Dve(e){throw new Error("Expected node, not `"+e+"`")}function Mve(e){const r=e;throw new Error("Cannot compile unknown node `"+r.type+"`")}const Nve={},Pve={},Bve=[];function Ive(e,r){const n=r||Nve,o=n.quote||'"',a=o==='"'?"'":'"';if(o!=='"'&&o!=="'")throw new Error("Invalid quote `"+o+"`, expected `'` or `\"`");return{one:Ove,all:Lve,settings:{omitOptionalTags:n.omitOptionalTags||!1,allowParseErrors:n.allowParseErrors||!1,allowDangerousCharacters:n.allowDangerousCharacters||!1,quoteSmart:n.quoteSmart||!1,preferUnquoted:n.preferUnquoted||!1,tightAttributes:n.tightAttributes||!1,upperDoctype:n.upperDoctype||!1,tightDoctype:n.tightDoctype||!1,bogusComments:n.bogusComments||!1,tightCommaSeparatedLists:n.tightCommaSeparatedLists||!1,tightSelfClosing:n.tightSelfClosing||!1,collapseEmptyAttributes:n.collapseEmptyAttributes||!1,allowDangerousHtml:n.allowDangerousHtml||!1,voids:n.voids||E0e,characterReferences:n.characterReferences||Pve,closeSelfClosing:n.closeSelfClosing||!1,closeEmptyElements:n.closeEmptyElements||!1},schema:n.space==="svg"?AB:M0e,quote:o,alternative:a}.one(Array.isArray(e)?{type:"root",children:e}:e,void 0,void 0)}function Ove(e,r,n){return Ave(e,r,n,this)}function Lve(e){const r=[],n=e&&e.children||Bve;let o=-1;for(;++o<n.length;)r[o]=this.one(n[o],o,e);return r.join("")}function Fve(e){const r=this,n={...r.data("settings"),...e};r.compiler=o;function o(a){return Ive(a,n)}}function Bwt(){}const Bo=td(/[A-Za-z]/),xo=td(/[\dA-Za-z]/),Vve=td(/[#-'*+\--9=?A-Z^-~]/);function Ob(e){return e!==null&&(e<32
`:" ")+i.indentLines(i.containerFlow(o,s.current()),r?GB:$be))),d(),c}}function $be(e,r,n){return r===0?e:GB(e,r,n)}function GB(e,r,n){return(n?"":" ")+e}const Rbe=["autolink","destinationLiteral","destinationRaw","reference","titleQuote","titleApostrophe"];YB.peek=Dbe;function zbe(){return{canContainEols:["delete"],enter:{strikethrough:jbe},exit:{strikethrough:Abe}}}function Tbe(){return{unsafe:[{character:"~",inConstruct:"phrasing",notInConstruct:Rbe}],handlers:{delete:YB}}}function jbe(e){this.enter({type:"delete",children:[]},e)}function Abe(e){this.exit(e)}function YB(e,r,n,o){const a=n.createTracker(o),i=n.enter("strikethrough");let l=a.move("~~");return l+=n.containerPhrasing(e,{...a.current(),before:l,after:"~"}),l+=a.move("~~"),i(),l}function Dbe(){return"~"}function Mbe(e){return e.length}function Nbe(e,r){const n=r||{},o=(n.align||[]).concat(),a=n.stringLength||Mbe,i=[],l=[],s=[],c=[];let d=0,u=-1;for(;++u<e.length;){const w=[],x=[];let k=-1;for(e[u].length>d&&(d=e[u].length);++k<e[u].length;){const C=Pbe(e[u][k]);if(n.alignDelimiters!==!1){const _=a(C);x[k]=_,(c[k]===void 0||_>c[k])&&(c[k]=_)}w.push(C)}l[u]=w,s[u]=x}let p=-1;if(typeof o=="object"&&"length"in o)for(;++p<d;)i[p]=XB(o[p]);else{const w=XB(o);for(;++p<d;)i[p]=w}p=-1;const f=[],g=[];for(;++p<d;){const w=i[p];let x="",k="";w===99?(x=":",k=":"):w===108?x=":":w===114&&(k=":");let C=n.alignDelimiters===!1?1:Math.max(1,c[p]-x.length-k.length);const _=x+"-".repeat(C)+k;n.alignDelimiters!==!1&&(C=x.length+C+k.length,C>c[p]&&(c[p]=C),g[p]=C),f[p]=_}l.splice(1,0,f),s.splice(1,0,g),u=-1;const v=[];for(;++u<l.length;){const w=l[u],x=s[u];p=-1;const k=[];for(;++p<d;){const C=w[p]||"";let _="",$="";if(n.alignDelimiters!==!1){const R=c[p]-(x[p]||0),T=i[p];T===114?_=" ".repeat(R):T===99?R%2?(_=" ".repeat(R/2+.5),$=" ".repeat(R/2-.5)):(_=" ".repeat(R/2),$=_):$=" ".repeat(R)}n.delimiterStart!==!1&&!p&&k.push("|"),n.padding!==!1&&!(n.alignDelimiters===!1&&C==="")&&(n.delimiterStart!==!1||p)&&k.push(" "),n.alignDelimiters!==!1&&k.push(_),k.push(C),n.alignDelimiters!==!1&&k.push($),n.padding!==!1&&k.push(" "),(n.delimiterEnd!==!1||p!==d-1)&&k.push("|")}v.push(n.delimiterEnd===!1?k.join("").replace(/ +$/,""):k.join(""))}return v.join(`
`)}function Pbe(e){return e==null?"":String(e)}function XB(e){const r=typeof e=="string"?e.codePointAt(0):0;return r===67||r===99?99:r===76||r===108?108:r===82||r===114?114:0}function Bbe(e,r,n,o){const a=n.enter("blockquote"),i=n.createTracker(o);i.move("> "),i.shift(2);const l=n.indentLines(n.containerFlow(e,i.current()),Ibe);return a(),l}function Ibe(e,r,n){return">"+(n?"":" ")+e}function Obe(e,r){return ZB(e,r.inConstruct,!0)&&!ZB(e,r.notInConstruct,!1)}function ZB(e,r,n){if(typeof r=="string"&&(r=[r]),!r||r.length===0)return n;let o=-1;for(;++o<r.length;)if(e.includes(r[o]))return!0;return!1}function KB(e,r,n,o){let a=-1;for(;++a<n.unsafe.length;)if(n.unsafe[a].character===`
`&&Obe(n.stack,n.unsafe[a]))return/[ \t]/.test(o.before)?"":" ";return`\\
`}function Lbe(e,r){const n=String(e);let o=n.indexOf(r),a=o,i=0,l=0;if(typeof r!="string")throw new TypeError("Expected substring");for(;o!==-1;)o===a?++i>l&&(l=i):i=1,a=o+r.length,o=n.indexOf(r,a);return l}function Fbe(e,r){return!!(r.options.fences===!1&&e.value&&!e.lang&&/[^ \r\n]/.test(e.value)&&!/^[\t ]*(?:[\r\n]|$)|(?:^|[\r\n])[\t ]*$/.test(e.value))}function Vbe(e){const r=e.options.fence||"`";if(r!=="`"&&r!=="~")throw new Error("Cannot serialize code with `"+r+"` for `options.fence`, expected `` ` `` or `~`");return r}function qbe(e,r,n,o){const a=Vbe(n),i=e.value||"",l=a==="`"?"GraveAccent":"Tilde";if(Fbe(e,n)){const p=n.enter("codeIndented"),f=n.indentLines(i,Hbe);return p(),f}const s=n.createTracker(o),c=a.repeat(Math.max(Lbe(i,a)+1,3)),d=n.enter("codeFenced");let u=s.move(c);if(e.lang){const p=n.enter(`codeFencedLang${l}`);u+=s.move(n.safe(e.lang,{before:u,after:" ",encode:["`"],...s.current()})),p()}if(e.lang&&e.meta){const p=n.enter(`codeFencedMeta${l}`);u+=s.move(" "),u+=s.move(n.safe(e.meta,{before:u,after:`
2025-12-16 12:13:34 +01:00
`,encode:["`"],...s.current()})),p()}return u+=s.move(`
`),i&&(u+=s.move(i+`
`)),u+=s.move(c),d(),u}function Hbe(e,r,n){return(n?"":" ")+e}function X_(e){const r=e.options.quote||'"';if(r!=='"'&&r!=="'")throw new Error("Cannot serialize title with `"+r+"` for `options.quote`, expected `\"`, or `'`");return r}function Ube(e,r,n,o){const a=X_(n),i=a==='"'?"Quote":"Apostrophe",l=n.enter("definition");let s=n.enter("label");const c=n.createTracker(o);let d=c.move("[");return d+=c.move(n.safe(n.associationId(e),{before:d,after:"]",...c.current()})),d+=c.move("]: "),s(),!e.url||/[\0- \u007F]/.test(e.url)?(s=n.enter("destinationLiteral"),d+=c.move("<"),d+=c.move(n.safe(e.url,{before:d,after:">",...c.current()})),d+=c.move(">")):(s=n.enter("destinationRaw"),d+=c.move(n.safe(e.url,{before:d,after:e.title?" ":`
`,...c.current()}))),s(),e.title&&(s=n.enter(`title${i}`),d+=c.move(" "+a),d+=c.move(n.safe(e.title,{before:d,after:a,...c.current()})),d+=c.move(a),s()),l(),d}function Wbe(e){const r=e.options.emphasis||"*";if(r!=="*"&&r!=="_")throw new Error("Cannot serialize emphasis with `"+r+"` for `options.emphasis`, expected `*`, or `_`");return r}function l1(e){return"&#x"+e.toString(16).toUpperCase()+";"}function Fh(e){if(e===null||Sr(e)||Pu(e))return 1;if(Lb(e))return 2}function qb(e,r,n){const o=Fh(e),a=Fh(r);return o===void 0?a===void 0?n==="_"?{inside:!0,outside:!0}:{inside:!1,outside:!1}:a===1?{inside:!0,outside:!0}:{inside:!1,outside:!0}:o===1?a===void 0?{inside:!1,outside:!1}:a===1?{inside:!0,outside:!0}:{inside:!1,outside:!1}:a===void 0?{inside:!1,outside:!1}:a===1?{inside:!0,outside:!1}:{inside:!1,outside:!1}}QB.peek=Gbe;function QB(e,r,n,o){const a=Wbe(n),i=n.enter("emphasis"),l=n.createTracker(o),s=l.move(a);let c=l.move(n.containerPhrasing(e,{after:a,before:s,...l.current()}));const d=c.charCodeAt(0),u=qb(o.before.charCodeAt(o.before.length-1),d,a);u.inside&&(c=l1(d)+c.slice(1));const p=c.charCodeAt(c.length-1),f=qb(o.after.charCodeAt(0),p,a);f.inside&&(c=c.slice(0,-1)+l1(p));const g=l.move(a);return i(),n.attentionEncodeSurroundingInfo={after:f.outside,before:u.outside},s+c+g}function Gbe(e,r,n){return n.options.emphasis||"*"}function Z_(e,r,n,o){let a,i,l;typeof r=="function"&&typeof n!="function"?(i=void 0,l=r,a=n):(i=r,l=n,a=o),HB(e,i,s,a);function s(c,d){const u=d[d.length-1],p=u?u.children.indexOf(c):void 0;return l(c,p,u)}}const Ybe={};function Hb(e,r){const n=r||Ybe,o=typeof n.includeImageAlt=="boolean"?n.includeImageAlt:!0,a=typeof n.includeHtml=="boolean"?n.includeHtml:!0;return JB(e,o,a)}function JB(e,r,n){if(Xbe(e)){if("value"in e)return e.type==="html"&&!n?"":e.value;if(r&&"alt"in e&&e.alt)return e.alt;if("children"in e)return eI(e.children,r,n)}return Array.isArray(e)?eI(e,r,n):""}function eI(e,r,n){const o=[];let a=-1;for(;++a<e.length;)o[a]=JB(e[a],r,n);return o.join("")}function Xbe(e){return!!(e&&typeof e=="object")}function Zbe(e,r){let n=!1;return Z_(e,function(o){if("value"in o&&/\r?\n|\r/.test(o.value)||o.type==="break")return n=!0,U_}),!!((!e.depth||e.depth<3)&&Hb(e)&&(r.options.setext||n))}function Kbe(e,r,n,o){const a=Math.max(Math.min(6,e.depth||1),1),i=n.createTracker(o);if(Zbe(e,n)){const u=n.enter("headingSetext"),p=n.enter("phrasing"),f=n.containerPhrasing(e,{...i.current(),before:`
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
`,after:`
2025-12-16 12:13:34 +01:00
`});return p(),u(),f+`
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
`+(a===1?"=":"-").repeat(f.length-(Math.max(f.lastIndexOf("\r"),f.lastIndexOf(`
2025-12-16 12:13:34 +01:00
`))+1))}const l="#".repeat(a),s=n.enter("headingAtx"),c=n.enter("phrasing");i.move(l+" ");let d=n.containerPhrasing(e,{before:"# ",after:`
`,...i.current()});return/^[\t ]/.test(d)&&(d=l1(d.charCodeAt(0))+d.slice(1)),d=d?l+" "+d:l,n.options.closeAtx&&(d+=" "+l),c(),s(),d}tI.peek=Qbe;function tI(e){return e.value||""}function Qbe(){return"<"}rI.peek=Jbe;function rI(e,r,n,o){const a=X_(n),i=a==='"'?"Quote":"Apostrophe",l=n.enter("image");let s=n.enter("label");const c=n.createTracker(o);let d=c.move("![");return d+=c.move(n.safe(e.alt,{before:d,after:"]",...c.current()})),d+=c.move("]("),s(),!e.url&&e.title||/[\0- \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 Jbe(){return"!"}nI.peek=exe;function nI(e,r,n,o){const a=e.referenceType,i=n.enter("imageReference");let l=n.enter("label");const s=n.createTracker(o);let c=s.move("![");const d=n.safe(e.alt,{before:c,after:"]",...s.current()});c+=s.move(d+"]["),l();const u=n.stack;n.stack=[],l=n.enter("reference");const p=n.safe(n.associationId(e),{before:c,after:"]",...s.current()});return l(),n.stack=u,i(),a==="full"||!d||d!==p?c+=s.move(p+"]"):a==="shortcut"?c=c.slice(0,-1):c+=s.move("]"),c}function exe(){return"!"}oI.peek=txe;function oI(e,r,n){let o=e.value||"",a="`",i=-1;for(;new RegExp("(^|[^`])"+a+"([^`]|$)").test(o);)a+="`";for(/[^ \r\n]/.test(o)&&(/^[ \r\n]/.test(o)&&/[ \r\n]$/.test(o)||/^`|`$/.test(o))&&(o=" "+o+" ");++i<n.unsafe.length;){const l=n.unsafe[i],s=n.compilePattern(l);let c;if(l.atBreak)for(;c=s.exec(o);){let d=c.index;o.charCodeAt(d)===10&&o.charCodeAt(d-1)===13&&d--,o=o.slice(0,d)+" "+o.slice(c.index+1)}}return a+o+a}function txe(){return"`"}function aI(e,r){const n=Hb(e);return!!(!r.options.resourceLink&&e.url&&!e.title&&e.children&&e.children.length===1&&e.children[0].type==="text"&&(n===e.url||"mailto:"+n===e.url)&&/^[a-z][a-z+.-]+:/i.test(e.url)&&!/[\0- <>\u007F]/.test(e.url))}iI.peek=rxe;function iI(e,r,n,o){const a=X_(n),i=a==='"'?"Quote":"Apostrophe",l=n.createTracker(o);let s,c;if(aI(e,n)){const u=n.stack;n.stack=[],s=n.enter("autolink");let p=l.move("<");return p+=l.move(n.containerPhrasing(e,{before:p,after:">",...l.current()})),p+=l.move(">"),s(),n.stack=u,p}s=n.enter("link"),c=n.enter("label");let d=l.move("[");return d+=l.move(n.containerPhrasing(e,{before:d,after:"](",...l.current()})),d+=l.move("]("),c(),!e.url&&e.title||/[\0- \u007F]/.test(e.url)?(c=n.enter("destinationLiteral"),d+=l.move("<"),d+=l.move(n.safe(e.url,{before:d,after:">",...l.current()})),d+=l.move(">")):(c=n.enter("destinationRaw"),d+=l.move(n.safe(e.url,{before:d,after:e.title?" ":")",...l.current()}))),c(),e.title&&(c=n.enter(`title${i}`),d+=l.move(" "+a),d+=l.move(n.safe(e.title,{before:d,after:a,...l.current()})),d+=l.move(a),c()),d+=l.move(")"),s(),d}function rxe(e,r,n){return aI(e,n)?"<":"["}lI.peek=nxe;function lI(e,r,n,o){const a=e.referenceType,i=n.enter("linkReference");let l=n.enter("label");const s=n.createTracker(o);let c=s.move("[");const d=n.containerPhrasing(e,{before:c,after:"]",...s.current()});c+=s.move(d+"]["),l();const u=n.stack;n.stack=[],l=n.enter("reference");const p=n.safe(n.associationId(e),{before:c,after:"]",...s.current()});return l(),n.stack=u,i(),a==="full"||!d||d!==p?c+=s.move(p+"]"):a==="shortcut"?c=c.slice(0,-1):c+=s.move("]"),c}function nxe(){return"["}function K_(e){const r=e.options.bullet||"*";if(r!=="*"&&r!=="+"&&r!=="-")throw new Error("Cannot serialize items with `"+r+"` for `options.bullet`, expected `*`, `+`, or `-`");return r}function oxe(e){const r=K_(e),n=e.options.bulletOther;if(!n)return r==="*"?"-":"*";if(n!=="*"&&n!=="+"&&n!=="-")throw new Error("Cannot serialize items with `"+n+"` for `options.bulletOther`, expected `*`, `+`, or `-`");if(n===r)throw new Error("Expected `bullet` (`"+r+"`) and `bulletOther` (`"+n+"`) to be different");return n}function axe(e){const r=e.options.bulletOrdered||".";if(r!=="."
`,Nfr:"𝔑",NoBreak:"",NonBreakingSpace:" ",Nopf:"",Not:"⫬",NotCongruent:"≢",NotCupCap:"≭",NotDoubleVerticalBar:"∦",NotElement:"∉",NotEqual:"≠",NotEqualTilde:"≂̸",NotExists:"∄",NotGreater:"≯",NotGreaterEqual:"≱",NotGreaterFullEqual:"≧̸",NotGreaterGreater:"≫̸",NotGreaterLess:"≹",NotGreaterSlantEqual:"⩾̸",NotGreaterTilde:"≵",NotHumpDownHump:"≎̸",NotHumpEqual:"≏̸",NotLeftTriangle:"⋪",NotLeftTriangleBar:"⧏̸",NotLeftTriangleEqual:"⋬",NotLess:"≮",NotLessEqual:"≰",NotLessGreater:"≸",NotLessLess:"≪̸",NotLessSlantEqual:"⩽̸",NotLessTilde:"≴",NotNestedGreaterGreater:"⪢̸",NotNestedLessLess:"⪡̸",NotPrecedes:"⊀",NotPrecedesEqual:"⪯̸",NotPrecedesSlantEqual:"⋠",NotReverseElement:"∌",NotRightTriangle:"⋫",NotRightTriangleBar:"⧐̸",NotRightTriangleEqual:"⋭",NotSquareSubset:"⊏̸",NotSquareSubsetEqual:"⋢",NotSquareSuperset:"⊐̸",NotSquareSupersetEqual:"⋣",NotSubset:"⊂⃒",NotSubsetEqual:"⊈",NotSucceeds:"⊁",NotSucceedsEqual:"⪰̸",NotSucceedsSlantEqual:"⋡",NotSucceedsTilde:"≿̸",NotSuperset:"⊃⃒",NotSupersetEqual:"⊉",NotTilde:"≁",NotTildeEqual:"≄",NotTildeFullEqual:"≇",NotTildeTilde:"≉",NotVerticalBar:"∤",Nscr:"𝒩",Ntilde:"Ñ",Nu:"Ν",OElig:"Œ",Oacute:"Ó",Ocirc:"Ô",Ocy:"О",Odblac:"Ő",Ofr:"𝔒",Ograve:"Ò",Omacr:"Ō",Omega:"Ω",Omicron:"Ο",Oopf:"𝕆",OpenCurlyDoubleQuote:"“",OpenCurlyQuote:"",Or:"⩔",Oscr:"𝒪",Oslash:"Ø",Otilde:"Õ",Otimes:"⨷",Ouml:"Ö",OverBar:"‾",OverBrace:"⏞",OverBracket:"⎴",OverParenthesis:"⏜",PartialD:"∂",Pcy:"П",Pfr:"𝔓",Phi:"Φ",Pi:"Π",PlusMinus:"±",Poincareplane:"",Popf:"",Pr:"⪻",Precedes:"≺",PrecedesEqual:"⪯",PrecedesSlantEqual:"≼",PrecedesTilde:"≾",Prime:"″",Product:"∏",Proportion:"∷",Proportional:"∝",Pscr:"𝒫",Psi:"Ψ",QUOT:'"',Qfr:"𝔔",Qopf:"",Qscr:"𝒬",RBarr:"⤐",REG:"®",Racute:"Ŕ",Rang:"⟫",Rarr:"↠",Rarrtl:"⤖",Rcaron:"Ř",Rcedil:"Ŗ",Rcy:"Р",Re:"",ReverseElement:"∋",ReverseEquilibrium:"⇋",ReverseUpEquilibrium:"⥯",Rfr:"",Rho:"Ρ",RightAngleBracket:"⟩",RightArrow:"→",RightArrowBar:"⇥",RightArrowLeftArrow:"⇄",RightCeiling:"⌉",RightDoubleBracket:"⟧",RightDownTeeVector:"⥝",RightDownVector:"⇂",RightDownVectorBar:"⥕",RightFloor:"⌋",RightTee:"⊢",RightTeeArrow:"↦",RightTeeVector:"⥛",RightTriangle:"⊳",RightTriangleBar:"⧐",RightTriangleEqual:"⊵",RightUpDownVector:"⥏",RightUpTeeVector:"⥜",RightUpVector:"↾",RightUpVectorBar:"⥔",RightVector:"⇀",RightVectorBar:"⥓",Rightarrow:"⇒",Ropf:"",RoundImplies:"⥰",Rrightarrow:"⇛",Rscr:"",Rsh:"↱",RuleDelayed:"⧴",SHCHcy:"Щ",SHcy:"Ш",SOFTcy:"Ь",Sacute:"Ś",Sc:"⪼",Scaron:"Š",Scedil:"Ş",Scirc:"Ŝ",Scy:"С",Sfr:"𝔖",ShortDownArrow:"↓",ShortLeftArrow:"←",ShortRightArrow:"→",ShortUpArrow:"↑",Sigma:"Σ",SmallCircle:"∘",Sopf:"𝕊",Sqrt:"√",Square:"□",SquareIntersection:"⊓",SquareSubset:"⊏",SquareSubsetEqual:"⊑",SquareSuperset:"⊐",SquareSupersetEqual:"⊒",SquareUnion:"⊔",Sscr:"𝒮",Star:"⋆",Sub:"⋐",Subset:"⋐",SubsetEqual:"⊆",Succeeds:"≻",SucceedsEqual:"⪰",SucceedsSlantEqual:"≽",SucceedsTilde:"≿",SuchThat:"∋",Sum:"∑",Sup:"⋑",Superset:"⊃",SupersetEqual:"⊇",Supset:"⋑",THORN:"Þ",TRADE:"™",TSHcy:"Ћ",TScy:"Ц",Tab:" ",Tau:"Τ",Tcaron:"Ť",Tcedil:"Ţ",Tcy:"Т",Tfr:"𝔗",Therefore:"∴",Theta:"Θ",ThickSpace:"",ThinSpace:"",Tilde:"",TildeEqual:"≃",TildeFullEqual:"≅",TildeTilde:"≈",Topf:"𝕋",TripleDot:"⃛",Tscr:"𝒯",Tstrok:"Ŧ",Uacute:"Ú",Uarr:"↟",Uarrocir:"⥉",Ubrcy:"Ў",Ubreve:"Ŭ",Ucirc:"Û",Ucy:"У",Udblac:"Ű",Ufr:"𝔘",Ugrave:"Ù",Umacr:"Ū",UnderBar:"_",UnderBrace:"⏟",UnderBracket:"⎵",UnderParenthesis:"⏝",Union:"",UnionPlus:"⊎",Uogon:"Ų",Uopf:"𝕌",UpArrow:"↑",UpArrowBar:"⤒",UpArrowDownArrow:"⇅",UpDownArrow:"↕",UpEquilibrium:"⥮",UpTee:"⊥",UpTeeArrow:"↥",Uparrow:"⇑",Updownarrow:"⇕",UpperLeftArrow:"↖",UpperRightArrow:"↗",Upsi:"ϒ",Upsilon:"Υ",Uring:"Ů",Uscr:"𝒰",Utilde:"Ũ",Uuml:"Ü",VDash:"⊫",Vbar
2025-12-16 12:13:34 +01:00
`,inConstruct:"tableCell"},{atBreak:!0,character:"|",after:"[ :-]"},{character:"|",inConstruct:"tableCell"},{atBreak:!0,character:":",after:"-"},{atBreak:!0,character:"-",after:"[:|-]"}],handlers:{inlineCode:f,table:l,tableCell:c,tableRow:s}};function l(g,v,w,x){return d(u(g,w,x),g.align)}function s(g,v,w,x){const k=p(g,w,x),C=d([k]);return C.slice(0,C.indexOf(`
`))}function c(g,v,w,x){const k=w.enter("tableCell"),C=w.enter("phrasing"),_=w.containerPhrasing(g,{...x,before:i,after:i});return C(),k(),_}function d(g,v){return Nbe(g,{align:v,alignDelimiters:o,padding:n,stringLength:a})}function u(g,v,w){const x=g.children;let k=-1;const C=[],_=v.enter("table");for(;++k<x.length;)C[k]=p(x[k],v,w);return _(),C}function p(g,v,w){const x=g.children;let k=-1;const C=[],_=v.enter("tableRow");for(;++k<x.length;)C[k]=c(x[k],g,v,w);return _(),C}function f(g,v,w){let x=dI.inlineCode(g,v,w);return w.stack.includes("tableCell")&&(x=x.replace(/\|/g,"\\$&")),x}}function Rxe(){return{exit:{taskListCheckValueChecked:fI,taskListCheckValueUnchecked:fI,paragraph:Txe}}}function zxe(){return{unsafe:[{atBreak:!0,character:"-",after:"[:|-]"}],handlers:{listItem:jxe}}}function fI(e){const r=this.stack[this.stack.length-2];r.type,r.checked=e.type==="taskListCheckValueChecked"}function Txe(e){const r=this.stack[this.stack.length-2];if(r&&r.type==="listItem"&&typeof r.checked=="boolean"){const n=this.stack[this.stack.length-1];n.type;const o=n.children[0];if(o&&o.type==="text"){const a=r.children;let i=-1,l;for(;++i<a.length;){const s=a[i];if(s.type==="paragraph"){l=s;break}}l===n&&(o.value=o.value.slice(1),o.value.length===0?n.children.shift():n.position&&o.position&&typeof o.position.start.offset=="number"&&(o.position.start.column++,o.position.start.offset++,n.position.start=Object.assign({},o.position.start)))}}this.exit(e)}function jxe(e,r,n,o){const a=e.children[0],i=typeof e.checked=="boolean"&&a&&a.type==="paragraph",l="["+(e.checked?"x":" ")+"] ",s=n.createTracker(o);i&&s.move(l);let c=dI.listItem(e,r,n,{...o,...s.current()});return i&&(c=c.replace(/^(?:[*+-]|\d+\.)([\r\n]| {1,3})/,d)),c;function d(u){return u+l}}function Axe(){return[obe(),Ebe(),zbe(),wxe(),Rxe()]}function Dxe(e){return{extensions:[abe(),Cbe(e),Tbe(),$xe(e),zxe()]}}function xa(e,r,n,o){const a=e.length;let i=0,l;if(r<0?r=-r>a?0:a+r:r=r>a?a:r,n=n>0?n:0,o.length<1e4)l=Array.from(o),l.unshift(r,n),e.splice(...l);else for(n&&e.splice(r,n);i<o.length;)l=o.slice(i,i+1e4),l.unshift(r,0),e.splice(...l),i+=1e4,r+=1e4}function Qa(e,r){return e.length>0?(xa(e,e.length,0,r),e):r}const mI={}.hasOwnProperty;function gI(e){const r={};let n=-1;for(;++n<e.length;)Mxe(r,e[n]);return r}function Mxe(e,r){let n;for(n in r){const a=(mI.call(e,n)?e[n]:void 0)||(e[n]={}),i=r[n];let l;if(i)for(l in i){mI.call(a,l)||(a[l]=[]);const s=i[l];Nxe(a[l],Array.isArray(s)?s:s?[s]:[])}}}function Nxe(e,r){let n=-1;const o=[];for(;++n<r.length;)(r[n].add==="after"?e:o).push(r[n]);xa(e,0,0,o)}const Pxe={tokenize:Vxe,partial:!0},yI={tokenize:qxe,partial:!0},vI={tokenize:Hxe,partial:!0},bI={tokenize:Uxe,partial:!0},Bxe={tokenize:Wxe,partial:!0},xI={name:"wwwAutolink",tokenize:Lxe,previous:kI},wI={name:"protocolAutolink",tokenize:Fxe,previous:_I},Bs={name:"emailAutolink",tokenize:Oxe,previous:SI},Vl={};function Ixe(){return{text:Vl}}let Bu=48;for(;Bu<123;)Vl[Bu]=Bs,Bu++,Bu===58?Bu=65:Bu===91&&(Bu=97);Vl[43]=Bs,Vl[45]=Bs,Vl[46]=Bs,Vl[95]=Bs,Vl[72]=[Bs,wI],Vl[104]=[Bs,wI],Vl[87]=[Bs,xI],Vl[119]=[Bs,xI];function Oxe(e,r,n){const o=this;let a,i;return l;function l(p){return!e8(p)||!SI.call(o,o.previous)||t8(o.events)?n(p):(e.enter("literalAutolink"),e.enter("literalAutolinkEmail"),s(p))}function s(p){return e8(p)?(e.consume(p),s):p===64?(e.consume(p),c):n(p)}function c(p){return p===46?e.check(Bxe,u,d)(p):p===45||p===95||xo(p)?(i=!0,e.consume(p),c):u(p)}function d(p){return e.consume(p),a=!0,c}function u(p){return i&&a&&Bo(o.previous)?(e.exit("literalAutolinkEmail"),e.exit("literalAutolink"),r(p)):n(p)}}function Lxe(e,r,n){const o=this;return a;function a(l){return l!==87&&l!==119||!kI.call(o,o.previous)||t8(o.events)?n(l):(e.enter("literalAutolink"),e.enter("literalAutolinkWww"),e.check(Pxe,e.attempt(yI,e.attempt(vI,i),n),n)(l))}function i(l){return e.exit("literalAutolinkWww"),e.exit("literalAutolink"),r(l)}}function Fxe(e,r,n){const o=this;let a="",i=!1;return l;function l(p){return(p===72||p===104)&&_I.call(o,o.previous)&&!t8(o.events)?(e.enter("literalAutolink"),e.enter(
2025-12-16 12:13:34 +01:00
`)&&(u.children[0]={type:"text",value:f.replace(g,"").replace(/^\n+/,"")}),!f.includes(`
`))){const w=[];u.children.forEach((x,k)=>{k!=0&&(k==1&&x.type==="break"||w.push(x))}),u.children=[...w]}}return u});l&&(o.data={hName:r,hProperties:{className:["markdown-alert",`markdown-alert-${l}`],dir:"auto"}},d.unshift({type:"paragraph",children:[M3e(l),{type:"text",value:s.replace(/^\//,"")}],data:{hProperties:{className:"markdown-alert-title",dir:"auto"}}})),o.children=[...d]})};function M3e(e){let r=N3e[e]??"";return{type:"emphasis",data:{hName:"svg",hProperties:{className:["octicon"],viewBox:"0 0 16 16",width:"16",height:"16",ariaHidden:"true"}},children:[{type:"emphasis",data:{hName:"path",hProperties:{d:r}},children:[]}]}}const N3e={note:"M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z",tip:"M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z",important:"M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z",warning:"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z",caution:"M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"},P3e={tokenize:B3e};function B3e(e){const r=e.attempt(this.parser.constructs.contentInitial,o,a);let n;return r;function o(s){if(s===null){e.consume(s);return}return e.enter("lineEnding"),e.consume(s),e.exit("lineEnding"),Kt(e,r,"linePrefix")}function a(s){return e.enter("paragraph"),i(s)}function i(s){const c=e.enter("chunkText",{contentType:"text",previous:n});return n&&(n.next=c),n=c,l(s)}function l(s){if(s===null){e.exit("chunkText"),e.exit("paragraph"),e.consume(s);return}return gt(s)?(e.consume(s),e.exit("chunkText"),i):(e.consume(s),l)}}const I3e={tokenize:O3e},II={tokenize:L3e};function O3e(e){const r=this,n=[];let o=0,a,i,l;return s;function s(_){if(o<n.length){const $=n[o];return r.containerState=$[1],e.attempt($[0].continuation,c,d)(_)}return d(_)}function c(_){if(o++,r.containerState._closeFlow){r.containerState._closeFlow=void 0,a&&C();const $=r.events.length;let R=$,T;for(;R--;)if(r.events[R][0]==="exit"&&r.events[R][1].type==="chunkFlow"){T=r.events[R][1].end;break}k(o);let A=$;for(;A<r.events.length;)r.events[A][1].end={...T},A++;return xa(r.events,R+1,0,r.events.slice($)),r.events.length=A,d(_)}return s(_)}function d(_){if(o===n.length){if(!a)return f(_);if(a.currentConstruct&&a.currentConstruct.concrete)return v(_);r.interrupt=!!(a.currentConstruct&&!a._gfmTableDynamicInterruptHack)}return r.containerState={}
2025-12-16 12:13:34 +01:00
`;break}case-3:{l=`\r
`;break}case-2:{l=r?" ":" ";break}case-1:{if(!r&&a)continue;l=" ";break}default:l=String.fromCharCode(i)}a=i===-2,o.push(l)}return o.join("")}function K3e(e){const o={constructs:gI([G3e,...(e||{}).extensions||[]]),content:a(P3e),defined:[],document:a(I3e),flow:a(F3e),lazy:{},string:a(H3e),text:a(U3e)};return o;function a(i){return l;function l(s){return Y3e(o,i,s)}}}function Q3e(e){for(;!jI(e););return e}const FI=/[\0\t\n\r]/g;function J3e(){let e=1,r="",n=!0,o;return a;function a(i,l,s){const c=[];let d,u,p,f,g;for(i=r+(typeof i=="string"?i.toString():new TextDecoder(l||void 0).decode(i)),p=0,r="",n&&(i.charCodeAt(0)===65279&&p++,n=void 0);p<i.length;){if(FI.lastIndex=p,d=FI.exec(i),f=d&&d.index!==void 0?d.index:i.length,g=i.charCodeAt(f),!d){r=i.slice(p);break}if(g===10&&p===f&&o)c.push(-3),o=void 0;else switch(o&&(c.push(-5),o=void 0),p<f&&(c.push(i.slice(p,f)),e+=f-p),g){case 0:{c.push(65533),e++;break}case 9:{for(u=Math.ceil(e/4)*4,c.push(-2);e++<u;)c.push(-1);break}case 10:{c.push(-4),e=1;break}default:o=!0,e=1}p=f+1}return s&&(o&&c.push(-5),r&&c.push(r),c.push(null)),c}}function u1(e){return!e||typeof e!="object"?"":"position"in e||"type"in e?VI(e.position):"start"in e||"end"in e?VI(e):"line"in e||"column"in e?i8(e):""}function i8(e){return qI(e&&e.line)+":"+qI(e&&e.column)}function VI(e){return i8(e&&e.start)+"-"+i8(e&&e.end)}function qI(e){return e&&typeof e=="number"?e:1}const HI={}.hasOwnProperty;function UI(e,r,n){return typeof r!="string"&&(n=r,r=void 0),e2e(n)(Q3e(K3e(n).document().write(J3e()(e,r,!0))))}function e2e(e){const r={transforms:[],canContainEols:["emphasis","fragment","heading","paragraph","strong"],enter:{autolink:i(Le),autolinkProtocol:j,autolinkEmail:j,atxHeading:i(je),blockQuote:i(ue),characterEscape:j,characterReference:j,codeFenced:i(_e),codeFencedFenceInfo:l,codeFencedFenceMeta:l,codeIndented:i(_e,l),codeText:i(ce,l),codeTextData:j,data:j,codeFlowValue:j,definition:i(pe),definitionDestinationString:l,definitionLabelString:l,definitionTitleString:l,emphasis:i(xe),hardBreakEscape:i(Be),hardBreakTrailing:i(Be),htmlFlow:i(Je,l),htmlFlowData:j,htmlText:i(Je,l),htmlTextData:j,image:i(st),label:l,link:i(Le),listItem:i(Ve),listItemValue:f,listOrdered:i(St,p),listUnordered:i(St),paragraph:i(qe),reference:O,referenceString:l,resourceDestinationString:l,resourceTitleString:l,setextHeading:i(je),strong:i(Xe),thematicBreak:i(Et)},exit:{atxHeading:c(),atxHeadingSequence:R,autolink:c(),autolinkEmail:re,autolinkProtocol:te,blockQuote:c(),characterEscapeValue:I,characterReferenceMarkerHexadecimal:K,characterReferenceMarkerNumeric:K,characterReferenceValue:Q,characterReference:ae,codeFenced:c(x),codeFencedFence:w,codeFencedFenceInfo:g,codeFencedFenceMeta:v,codeFlowValue:I,codeIndented:c(k),codeText:c(V),codeTextData:I,data:I,definition:c(),definitionDestinationString:$,definitionLabelString:C,definitionTitleString:_,emphasis:c(),hardBreakEscape:c(L),hardBreakTrailing:c(L),htmlFlow:c(H),htmlFlowData:I,htmlText:c(M),htmlTextData:I,image:c(F),label:G,labelText:q,lineEnding:P,link:c(B),listItem:c(),listOrdered:c(),listUnordered:c(),paragraph:c(),referenceString:W,resourceDestinationString:U,resourceTitleString:Y,resource:Z,setextHeading:c(z),setextHeadingLineSequence:A,setextHeadingText:T,strong:c(),thematicBreak:c()}};WI(r,(e||{}).mdastExtensions||[]);const n={};return o;function o(be){let ke={type:"root",children:[]};const Ye={stack:[ke],tokenStack:[],config:r,enter:s,exit:d,buffer:l,resume:u,data:n},yt=[];let xt=-1;for(;++xt<be.length;)if(be[xt][1].type==="listOrdered"||be[xt][1].type==="listUnordered")if(be[xt][0]==="enter")yt.push(xt);else{const Tr=yt.pop();xt=a(be,Tr,xt)}for(xt=-1;++xt<be.length;){const Tr=r[be[xt][0]];HI.call(Tr,be[xt][1].type)&&Tr[be[xt][1].type].call(Object.assign({sliceSerialize:be[xt][2].sliceSerialize},Ye),be[xt][1])}if(Ye.tokenStack.length>0){const Tr=Ye.tokenStack[Ye.tokenStack.length-1];(Tr[1]||GI).call(Ye,void 0,Tr[0])}for(ke.position={start:rd(be.length>0?be[0][1].start:{line:1,column:1,offset:0}),end:rd(be.length>0?be[be.length-2][1].end:{line:1,column:1,offset:0})},xt=-1;++
`}]}function a2e(e,r){const n=r.value?r.value+`
`:"",o={};r.lang&&(o.className=["language-"+r.lang]);let a={type:"element",tagName:"code",properties:o,children:[{type:"text",value:n}]};return r.meta&&(a.data={meta:r.meta}),e.patch(r,a),a=e.applyData(r,a),a={type:"element",tagName:"pre",properties:{},children:[a]},e.patch(r,a),a}function i2e(e,r){const n={type:"element",tagName:"del",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}function l2e(e,r){const n={type:"element",tagName:"em",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}function s2e(e,r){const n=typeof e.options.clobberPrefix=="string"?e.options.clobberPrefix:"user-content-",o=String(r.identifier).toUpperCase(),a=Vh(o.toLowerCase()),i=e.footnoteOrder.indexOf(o);let l,s=e.footnoteCounts.get(o);s===void 0?(s=0,e.footnoteOrder.push(o),l=e.footnoteOrder.length):l=i+1,s+=1,e.footnoteCounts.set(o,s);const c={type:"element",tagName:"a",properties:{href:"#"+n+"fn-"+a,id:n+"fnref-"+a+(s>1?"-"+s:""),dataFootnoteRef:!0,ariaDescribedBy:["footnote-label"]},children:[{type:"text",value:String(l)}]};e.patch(r,c);const d={type:"element",tagName:"sup",properties:{},children:[c]};return e.patch(r,d),e.applyData(r,d)}function c2e(e,r){const n={type:"element",tagName:"h"+r.depth,properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}function d2e(e,r){if(e.options.allowDangerousHtml){const n={type:"raw",value:r.value};return e.patch(r,n),e.applyData(r,n)}}function YI(e,r){const n=r.referenceType;let o="]";if(n==="collapsed"?o+="[]":n==="full"&&(o+="["+(r.label||r.identifier)+"]"),r.type==="imageReference")return[{type:"text",value:"!["+r.alt+o}];const a=e.all(r),i=a[0];i&&i.type==="text"?i.value="["+i.value:a.unshift({type:"text",value:"["});const l=a[a.length-1];return l&&l.type==="text"?l.value+=o:a.push({type:"text",value:o}),a}function u2e(e,r){const n=String(r.identifier).toUpperCase(),o=e.definitionById.get(n);if(!o)return YI(e,r);const a={src:Vh(o.url||""),alt:r.alt};o.title!==null&&o.title!==void 0&&(a.title=o.title);const i={type:"element",tagName:"img",properties:a,children:[]};return e.patch(r,i),e.applyData(r,i)}function p2e(e,r){const n={src:Vh(r.url)};r.alt!==null&&r.alt!==void 0&&(n.alt=r.alt),r.title!==null&&r.title!==void 0&&(n.title=r.title);const o={type:"element",tagName:"img",properties:n,children:[]};return e.patch(r,o),e.applyData(r,o)}function h2e(e,r){const n={type:"text",value:r.value.replace(/\r?\n|\r/g," ")};e.patch(r,n);const o={type:"element",tagName:"code",properties:{},children:[n]};return e.patch(r,o),e.applyData(r,o)}function f2e(e,r){const n=String(r.identifier).toUpperCase(),o=e.definitionById.get(n);if(!o)return YI(e,r);const a={href:Vh(o.url||"")};o.title!==null&&o.title!==void 0&&(a.title=o.title);const i={type:"element",tagName:"a",properties:a,children:e.all(r)};return e.patch(r,i),e.applyData(r,i)}function m2e(e,r){const n={href:Vh(r.url)};r.title!==null&&r.title!==void 0&&(n.title=r.title);const o={type:"element",tagName:"a",properties:n,children:e.all(r)};return e.patch(r,o),e.applyData(r,o)}function g2e(e,r,n){const o=e.all(r),a=n?y2e(n):XI(r),i={},l=[];if(typeof r.checked=="boolean"){const u=o[0];let p;u&&u.type==="element"&&u.tagName==="p"?p=u:(p={type:"element",tagName:"p",properties:{},children:[]},o.unshift(p)),p.children.length>0&&p.children.unshift({type:"text",value:" "}),p.children.unshift({type:"element",tagName:"input",properties:{type:"checkbox",checked:r.checked,disabled:!0},children:[]}),i.className=["task-list-item"]}let s=-1;for(;++s<o.length;){const u=o[s];(a||s!==0||u.type!=="element"||u.tagName!=="p")&&l.push({type:"text",value:`
2025-12-16 12:13:34 +01:00
`}),u.type==="element"&&u.tagName==="p"&&!a?l.push(...u.children):l.push(u)}const c=o[o.length-1];c&&(a||c.type!=="element"||c.tagName!=="p")&&l.push({type:"text",value:`
`});const d={type:"element",tagName:"li",properties:i,children:l};return e.patch(r,d),e.applyData(r,d)}function y2e(e){let r=!1;if(e.type==="list"){r=e.spread||!1;const n=e.children;let o=-1;for(;!r&&++o<n.length;)r=XI(n[o])}return r}function XI(e){const r=e.spread;return r??e.children.length>1}function v2e(e,r){const n={},o=e.all(r);let a=-1;for(typeof r.start=="number"&&r.start!==1&&(n.start=r.start);++a<o.length;){const l=o[a];if(l.type==="element"&&l.tagName==="li"&&l.properties&&Array.isArray(l.properties.className)&&l.properties.className.includes("task-list-item")){n.className=["contains-task-list"];break}}const i={type:"element",tagName:r.ordered?"ol":"ul",properties:n,children:e.wrap(o,!0)};return e.patch(r,i),e.applyData(r,i)}function b2e(e,r){const n={type:"element",tagName:"p",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}function x2e(e,r){const n={type:"root",children:e.wrap(e.all(r))};return e.patch(r,n),e.applyData(r,n)}function w2e(e,r){const n={type:"element",tagName:"strong",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}function k2e(e,r){const n=e.all(r),o=n.shift(),a=[];if(o){const l={type:"element",tagName:"thead",properties:{},children:e.wrap([o],!0)};e.patch(r.children[0],l),a.push(l)}if(n.length>0){const l={type:"element",tagName:"tbody",properties:{},children:e.wrap(n,!0)},s=fB(r.children[1]),c=hB(r.children[r.children.length-1]);s&&c&&(l.position={start:s,end:c}),a.push(l)}const i={type:"element",tagName:"table",properties:{},children:e.wrap(a,!0)};return e.patch(r,i),e.applyData(r,i)}function _2e(e,r,n){const o=n?n.children:void 0,i=(o?o.indexOf(r):1)===0?"th":"td",l=n&&n.type==="table"?n.align:void 0,s=l?l.length:r.children.length;let c=-1;const d=[];for(;++c<s;){const p=r.children[c],f={},g=l?l[c]:void 0;g&&(f.align=g);let v={type:"element",tagName:i,properties:f,children:[]};p&&(v.children=e.all(p),e.patch(p,v),v=e.applyData(p,v)),d.push(v)}const u={type:"element",tagName:"tr",properties:{},children:e.wrap(d,!0)};return e.patch(r,u),e.applyData(r,u)}function S2e(e,r){const n={type:"element",tagName:"td",properties:{},children:e.all(r)};return e.patch(r,n),e.applyData(r,n)}const ZI=9,KI=32;function E2e(e){const r=String(e),n=/\r?\n|\r/g;let o=n.exec(r),a=0;const i=[];for(;o;)i.push(QI(r.slice(a,o.index),a>0,!0),o[0]),a=o.index+o[0].length,o=n.exec(r);return i.push(QI(r.slice(a),a>0,!1)),i.join("")}function QI(e,r,n){let o=0,a=e.length;if(r){let i=e.codePointAt(o);for(;i===ZI||i===KI;)o++,i=e.codePointAt(o)}if(n){let i=e.codePointAt(a-1);for(;i===ZI||i===KI;)a--,i=e.codePointAt(a-1)}return a>o?e.slice(o,a):""}function C2e(e,r){const n={type:"text",value:E2e(String(r.value))};return e.patch(r,n),e.applyData(r,n)}function $2e(e,r){const n={type:"element",tagName:"hr",properties:{},children:[]};return e.patch(r,n),e.applyData(r,n)}const R2e={blockquote:n2e,break:o2e,code:a2e,delete:i2e,emphasis:l2e,footnoteReference:s2e,heading:c2e,html:d2e,imageReference:u2e,image:p2e,inlineCode:h2e,linkReference:f2e,link:m2e,listItem:g2e,list:v2e,paragraph:b2e,root:x2e,strong:w2e,table:k2e,tableCell:S2e,tableRow:_2e,text:C2e,thematicBreak:$2e,toml:Yb,yaml:Yb,definition:Yb,footnoteDefinition:Yb};function Yb(){}function z2e(e,r){const n=[{type:"text",value:"↩"}];return r>1&&n.push({type:"element",tagName:"sup",properties:{},children:[{type:"text",value:String(r)}]}),n}function T2e(e,r){return"Back to reference "+(e+1)+(r>1?"-"+r:"")}function j2e(e){const r=typeof e.options.clobberPrefix=="string"?e.options.clobberPrefix:"user-content-",n=e.options.footnoteBackContent||z2e,o=e.options.footnoteBackLabel||T2e,a=e.options.footnoteLabel||"Footnotes",i=e.options.footnoteLabelTagName||"h2",l=e.options.footnoteLabelProperties||{className:["sr-only"]},s=[];let c=-1;for(;++c<e.footnoteOrder.length;){const d=e.footnoteById.get(e.footnoteOrder[c]);if(!d)continue;const u=e.all(d),p=String(d.identifier).toUpperCase(),f=Vh(p.toLowerCase());let g=0;const v=[],w=e.footnoteCounts.get(p);for(;w!==void 0&&++g<=w;){v.length>0&&v.push({type:"text",value:" "});let C=typeof n=="string"?n
2025-12-16 12:13:34 +01:00
`},{type:"element",tagName:"ol",properties:{},children:e.wrap(s,!0)},{type:"text",value:`
`}]}}const l8={}.hasOwnProperty,A2e={};function D2e(e,r){const n=r||A2e,o=new Map,a=new Map,i=new Map,l={...R2e,...n.handlers},s={all:d,applyData:N2e,definitionById:o,footnoteById:a,footnoteCounts:i,footnoteOrder:[],handlers:l,one:c,options:n,patch:M2e,wrap:B2e};return Z_(e,function(u){if(u.type==="definition"||u.type==="footnoteDefinition"){const p=u.type==="definition"?o:a,f=String(u.identifier).toUpperCase();p.has(f)||p.set(f,u)}}),s;function c(u,p){const f=u.type,g=s.handlers[f];if(l8.call(s.handlers,f)&&g)return g(s,u,p);if(s.options.passThrough&&s.options.passThrough.includes(f)){if("children"in u){const{children:w,...x}=u,k=o1(x);return k.children=s.all(u),k}return o1(u)}return(s.options.unknownHandler||P2e)(s,u,p)}function d(u){const p=[];if("children"in u){const f=u.children;let g=-1;for(;++g<f.length;){const v=s.one(f[g],u);if(v){if(g&&f[g-1].type==="break"&&(!Array.isArray(v)&&v.type==="text"&&(v.value=JI(v.value)),!Array.isArray(v)&&v.type==="element")){const w=v.children[0];w&&w.type==="text"&&(w.value=JI(w.value))}Array.isArray(v)?p.push(...v):p.push(v)}}}return p}}function M2e(e,r){e.position&&(r.position=gB(e))}function N2e(e,r){let n=r;if(e&&e.data){const o=e.data.hName,a=e.data.hChildren,i=e.data.hProperties;if(typeof o=="string")if(n.type==="element")n.tagName=o;else{const l="children"in n?n.children:[n];n={type:"element",tagName:o,properties:{},children:l}}n.type==="element"&&i&&Object.assign(n.properties,o1(i)),"children"in n&&n.children&&a!==null&&a!==void 0&&(n.children=a)}return n}function P2e(e,r){const n=r.data||{},o="value"in r&&!(l8.call(n,"hProperties")||l8.call(n,"hChildren"))?{type:"text",value:r.value}:{type:"element",tagName:"div",properties:{},children:e.all(r)};return e.patch(r,o),e.applyData(r,o)}function B2e(e,r){const n=[];let o=-1;for(r&&n.push({type:"text",value:`
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
`});++o<e.length;)o&&n.push({type:"text",value:`
`}),n.push(e[o]);return r&&e.length>0&&n.push({type:"text",value:`
`}),n}function JI(e){let r=0,n=e.charCodeAt(r);for(;n===9||n===32;)r++,n=e.charCodeAt(r);return e.slice(r)}function eO(e,r){const n=D2e(e,r),o=n.one(e,void 0),a=j2e(n),i=Array.isArray(o)?{type:"root",children:o}:o||{type:"root",children:[]};return a&&i.children.push({type:"text",value:`
`},a),i}function I2e(e,r){return e&&"run"in e?async function(n,o){const a=eO(n,{file:o,...r});await e.run(a,o)}:function(n,o){return eO(n,{file:o,...e||r})}}function tO(e){if(e)throw e}var s8,rO;function O2e(){if(rO)return s8;rO=1;var e=Object.prototype.hasOwnProperty,r=Object.prototype.toString,n=Object.defineProperty,o=Object.getOwnPropertyDescriptor,a=function(d){return typeof Array.isArray=="function"?Array.isArray(d):r.call(d)==="[object Array]"},i=function(d){if(!d||r.call(d)!=="[object Object]")return!1;var u=e.call(d,"constructor"),p=d.constructor&&d.constructor.prototype&&e.call(d.constructor.prototype,"isPrototypeOf");if(d.constructor&&!u&&!p)return!1;var f;for(f in d);return typeof f>"u"||e.call(d,f)},l=function(d,u){n&&u.name==="__proto__"?n(d,u.name,{enumerable:!0,configurable:!0,value:u.newValue,writable:!0}):d[u.name]=u.newValue},s=function(d,u){if(u==="__proto__")if(e.call(d,u)){if(o)return o(d,u).value}else return;return d[u]};return s8=function c(){var d,u,p,f,g,v,w=arguments[0],x=1,k=arguments.length,C=!1;for(typeof w=="boolean"&&(C=w,w=arguments[1]||{},x=2),(w==null||typeof w!="object"&&typeof w!="function")&&(w={});x<k;++x)if(d=arguments[x],d!=null)for(u in d)p=s(w,u),f=s(d,u),w!==f&&(C&&f&&(i(f)||(g=a(f)))?(g?(g=!1,v=p&&a(p)?p:[]):v=p&&i(p)?p:{},l(w,{name:u,newValue:c(C,v,f)})):typeof f<"u"&&l(w,{name:u,newValue:f}));return w},s8}var L2e=O2e();const c8=Qg(L2e);function d8(e){if(typeof e!="object"||e===null)return!1;const r=Object.getPrototypeOf(e);return(r===null||r===Object.prototype||Object.getPrototypeOf(r)===null)&&!(Symbol.toStringTag in e)&&!(Symbol.iterator in e)}function F2e(){const e=[],r={run:n,use:o};return r;function n(...a){let i=-1;const l=a.pop();if(typeof l!="function")throw new TypeError("Expected function as last argument, not "+l);s(null,...a);function s(c,...d){const u=e[++i];let p=-1;if(c){l(c);return}for(;++p<a.length;)(d[p]===null||d[p]===void 0)&&(d[p]=a[p]);a=d,u?V2e(u,s)(...d):l(null,...d)}}function o(a){if(typeof a!="function")throw new TypeError("Expected `middelware` to be a function, not "+a);return e.push(a),r}}function V2e(e,r){let n;return o;function o(...l){const s=e.length>l.length;let c;s&&l.push(a);try{c=e.apply(this,l)}catch(d){const u=d;if(s&&n)throw u;return a(u)}s||(c&&c.then&&typeof c.then=="function"?c.then(i,a):c instanceof Error?a(c):i(c))}function a(l,...s){n||(n=!0,r(l,...s))}function i(l){a(null,l)}}class ta extends Error{constructor(r,n,o){super(),typeof n=="string"&&(o=n,n=void 0);let a="",i={},l=!1;if(n&&("line"in n&&"column"in n?i={place:n}:"start"in n&&"end"in n?i={place:n}:"type"in n?i={ancestors:[n],place:n.position}:i={...n}),typeof r=="string"?a=r:!i.cause&&r&&(l=!0,a=r.message,i.cause=r),!i.ruleId&&!i.source&&typeof o=="string"){const c=o.indexOf(":");c===-1?i.ruleId=o:(i.source=o.slice(0,c),i.ruleId=o.slice(c+1))}if(!i.place&&i.ancestors&&i.ancestors){const c=i.ancestors[i.ancestors.length-1];c&&(i.place=c.position)}const s=i.place&&"start"in i.place?i.place.start:i.place;this.ancestors=i.ancestors||void 0,this.cause=i.cause||void 0,this.column=s?s.column:void 0,this.fatal=void 0,this.file,this.message=a,this.line=s?s.line:void 0,this.name=u1(i.place)||"1:1",this.place=i.place||void 0,this.reason=this.message,this.ruleId=i.ruleId||void 0,this.source=i.source||void 0,this.stack=l&&i.cause&&typeof i.cause.stack=="string"?i.cause.stack:"",this.actual,this.expected,this.note,this.url}}ta.prototype.file="",ta.prototype.name="",ta.prototype.reason="",ta.prototype.message="",ta.prototype.stack="",ta.prototype.column=void 0,ta.prototype.line=void 0,ta.prototype.ancestors=void 0,ta.prototype.cause=void 0,ta.prototype.fatal=void 0,ta.prototype.place=void 0,ta.prototype.ruleId=void 0,ta.prototype.source=void 0;const ql={basename:q2e,dirname:H2e,extname:U2e,join:W2e,sep:"/"};function q2e(e,r){if(r!==void 0&&typeof r!="string")throw new TypeError('"ext" argument must be a string');p1(e);let n=0,o=-1,a=e.length,i;if(r===void 0||r.length===0||r.length>e.length){for(;a--;)if(e.codePointAt(a)===47){if(i){n=a+1;break}}else o<0&&(i=!0,o=a+1);return o<0?"":e.s
`)}reversed(r=!1){if(!r)return new ei(this.target,this.source);const[n]=t7(this.target,this.source,"directed");return n??new ei(this.target,this.source,new Set)}}function qke(e){if(e==null||e==="")return!0;if(typeof e!="object")return!1;if("length"in e&&typeof e.length=="number")return e.length===0;if("size"in e&&typeof e.size=="number")return e.size===0;for(let r in e)return!1;return Object.getOwnPropertySymbols(e).length===0}function Hke(...e){return io(Uke,e)}const Uke=e=>e.at(-1);function oL(e,r,n){return typeof r=="number"||r===void 0?o=>o.split(e,r):e.split(r,n)}function fx(...e){return io(Object.values,e)}class mx{constructor(r,n){this.$model=r,this.$element=n,this.id=this.$element.id,this._literalId=this.$element.id;const[o,a]=yke(this.id);o?(this.imported={from:o,fqn:a},this.hierarchyLevel=Tb(a)):(this.imported=null,this.hierarchyLevel=Tb(this.id))}Aux;id;_literalId;hierarchyLevel;imported;get name(){return Jg(this.id)}get parent(){return this.$model.parent(this)}get kind(){return this.$element.kind}get shape(){return this.style.shape}get color(){return this.style.color}get icon(){return this.style.icon??null}get tags(){return ir(this,Symbol.for("tags"),()=>Kb([...this.$element.tags??[],...this.$model.specification.elements[this.$element.kind]?.tags??[]]))}get title(){return this.$element.title}get hasSummary(){return!!this.$element.summary&&!!this.$element.description&&!e7(this.$element.summary,this.$element.description)}get summary(){return ur.memoize(this,"summary",Fs(this.$element))}get description(){return ur.memoize(this,"description",Xh(this.$element))}get technology(){return this.$element.technology??null}get links(){return this.$element.links??[]}get defaultView(){return ir(this,Symbol.for("defaultView"),()=>m1(this.scopedViews())??null)}get isRoot(){return this.parent===null}get style(){return ir(this,"style",()=>_1({shape:this.$model.$styles.defaults.shape,color:this.$model.$styles.defaults.color,border:this.$model.$styles.defaults.border,opacity:this.$model.$styles.defaults.opacity,size:this.$model.$styles.defaults.size,padding:this.$model.$styles.defaults.padding,textSize:this.$model.$styles.defaults.text,...this.$element.style}))}isAncestorOf(r){return Yn(this,r)}isDescendantOf(r){return Yn(r,this)}ancestors(){return this.$model.ancestors(this)}commonAncestor(r){const n=t1(this.id,r.id);return n?this.$model.element(n):null}children(){return this.$model.children(this)}descendants(r){return r?rB([...this.$model.descendants(this)],r)[Symbol.iterator]():this.$model.descendants(this)}siblings(){return this.$model.siblings(this)}*ascendingSiblings(){yield*this.siblings();for(const r of this.ancestors())yield*r.siblings()}*descendingSiblings(){for(const r of[...this.ancestors()].reverse())yield*r.siblings();yield*this.siblings()}incoming(r="all"){return this.$model.incoming(this,r)}*incomers(r="all"){const n=new Set;for(const o of this.incoming(r))n.has(o.source.id)||(n.add(o.source.id),yield o.source)}outgoing(r="all"){return this.$model.outgoing(this,r)}*outgoers(r="all"){const n=new Set;for(const o of this.outgoing(r))n.has(o.target.id)||(n.add(o.target.id),yield o.target)}get allOutgoing(){return ir(this,Symbol.for("allOutgoing"),()=>new Set(this.outgoing()))}get allIncoming(){return ir(this,Symbol.for("allIncoming"),()=>new Set(this.incoming()))}views(){return ir(this,Symbol.for("views"),()=>{const r=new Set;for(const n of this.$model.views())n.includesElement(this.id)&&r.add(n);return r})}scopedViews(){return ir(this,Symbol.for("scopedViews"),()=>{const r=new Set;for(const n of this.$model.views())n.isScopedElementView()&&n.viewOf.id===this.id&&r.add(n);return r})}isDeployed(){return Ja(m1(this.deployments()))}deployments(){return this.$model.deployment.instancesOf(this)}hasMetadata(){return!!this.$element.metadata&&!$1(this.$element.metadata)}getMetadata(r){return r?this.$element.metadata?.[r]:this.$element.metadata??{}}isTagged(r){return this.tags.includes(r)}}const yr=e=>typeof e=="string"?e:e.id,_a="/",r7=e=>{if(He(!e.includes(`
`),"View title cannot contain newlines"),e.includes(_a)){const r=e.split(_a).map(n=>n.trim()).filter(n=>n.length>0);return Ll(r,1)?r:[""]}return[e.trim()]},gx=e=>r7(e).join(_a),Wke=e=>{const r=r7(e);return Ll(r,2)?r.slice(0,-1).join(_a):null},n7=e=>e.includes(_a)?r7(e).pop()??e:e.trim();class Gke{constructor(r){this.$model=r;const n=this.$deployments=r.$data.deployments,o=fx(n.elements);for(const a of Jc(o)){const i=this.addElement(a);for(const l of i.tags)this.#c.get(l).add(i);i.isInstance()&&this.#r.get(i.element.id).add(i)}for(const a of fx(n.relations)){const i=this.addRelation(a);for(const l of i.tags)this.#c.get(l).add(i)}}#e=new Map;#i=new Map;#t=new Ln(()=>new Set);#r=new Ln(()=>new Set);#l=new Set;#n=new Map;#s=new Ln(()=>new Set);#a=new Ln(()=>new Set);#o=new Ln(()=>new Set);#c=new Ln(()=>new Set);#d=new Map;$deployments;get $styles(){return this.$model.$styles}element(r){if(r instanceof eL||r instanceof tL)return r;const n=yr(r);return mt(this.#e.get(n),`Element ${n} not found`)}findElement(r){return this.#e.get(r)??null}node(r){const n=this.element(r);return He(n.isDeploymentNode(),`Element ${n.id} is not a deployment node`),n}findNode(r){const n=this.findElement(r);return n?(He(n.isDeploymentNode(),`Element ${n?.id} is not a deployment node`),n):null}instance(r){const n=this.element(r);return He(n.isInstance(),`Element ${n.id} is not a deployed instance`),n}findInstance(r){const n=this.findElement(r);return n?(He(n.isInstance(),`Element ${n?.id} is not a deployed instance`),n):null}roots(){return this.#l.values()}elements(){return this.#e.values()}*nodes(){for(const r of this.#e.values())r.isDeploymentNode()&&(yield r)}*nodesOfKind(r){for(const n of this.#e.values())n.isDeploymentNode()&&n.kind===r&&(yield n)}*instances(){for(const r of this.#e.values())r.isInstance()&&(yield r)}*instancesOf(r){const n=yr(r),o=this.#r.get(n);o&&(yield*o)}deploymentRef(r){if(S1.isInsideInstanceRef(r)){const{deployment:n,element:o}=r;return $ke(this.#d,`${n}@${o}`,()=>new Oke(this.instance(n),this.$model.element(o)))}return this.element(r.deployment)}relationships(){return this.#n.values()}relationship(r){const n=yr(r);return mt(this.#n.get(n),`DeploymentRelationModel ${n} not found`)}findRelationship(r){return this.#n.get(r)??null}*views(){for(const r of this.$model.views())r.isDeploymentView()&&(yield r)}parent(r){const n=yr(r);return this.#i.get(n)||null}children(r){const n=yr(r);return this.#t.get(n)}*siblings(r){const n=yr(r),o=this.parent(r)?.children()??this.roots();for(const a of o)a.id!==n&&(yield a)}*ancestors(r){let n=yr(r),o;for(;o=this.#i.get(n);)yield o,n=o.id}*descendants(r,n="desc"){for(const o of this.children(r))n==="asc"?(yield o,yield*this.descendants(o.id)):(yield*this.descendants(o.id),yield o)}*incoming(r,n="all"){const o=yr(r);for(const a of this.#s.get(o))switch(!0){case n==="all":case(n==="direct"&&a.target.id===o):case(n==="to-descendants"&&a.target.id!==o):yield a;break}}*outgoing(r,n="all"){const o=yr(r);for(const a of this.#a.get(o))switch(!0){case n==="all":case(n==="direct"&&a.source.id===o):case(n==="from-descendants"&&a.source.id!==o):yield a;break}}addElement(r){if(this.#e.has(r.id))throw new Error(`Element ${r.id} already exists`);const n=v4e(r)?new eL(this,Object.freeze(r)):new tL(this,Object.freeze(r),this.$model.element(r.element));this.#e.set(n.id,n);const o=zb(n.id);return o?(He(this.#e.has(o),`Parent ${o} of ${n.id} not found`),this.#i.set(n.id,this.node(o)),this.#t.get(o).add(n)):(He(n.isDeploymentNode(),`Root element ${n.id} is not a deployment node`),this.#l.add(n)),n}addRelation(r){if(this.#n.has(r.id))throw new Error(`Relation ${r.id} already exists`);const n=new Lke(this,Object.freeze(r));this.#n.set(n.id,n),this.#s.get(n.target.id).add(n),this.#a.get(n.source.id).add(n);const o=n.boundary?.id??null;if(o)for(const a of[o,...Du(o)])this.#o.get(a).add(n);for(const a of Du(n.source.id)){if(a===o)break;this.#a.get(a).add(n)}for(const a of Du(n.target.id)){if(a===o)break;this.#s.get(a).add(n)}return n}}class aL{constructor(r,n){this.model=r,this.$relationship=n,this.source=r.element(
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
`).replace(`
`,`
+`).split(`
`)),d=c.reduce((u,p)=>u.concat(...p),[]);return[c,d]}return[[],[]]},[e]);return S.useEffect(()=>{const c=r?.target??zV,d=r?.actInsideInputWithModifier??!0;if(e!==null){const u=g=>{if(a.current=g.ctrlKey||g.metaKey||g.shiftKey||g.altKey,(!a.current||a.current&&!d)&&PF(g))return!1;const v=jV(g.code,s);if(i.current.add(g[v]),TV(l,i.current,!1)){const w=g.composedPath?.()?.[0]||g.target,x=w?.nodeName==="BUTTON"||w?.nodeName==="A";r.preventDefault!==!1&&(a.current||!x)&&g.preventDefault(),o(!0)}},p=g=>{const v=jV(g.code,s);TV(l,i.current,!0)?(o(!1),i.current.clear()):i.current.delete(g[v]),g.key==="Meta"&&i.current.clear(),a.current=!1},f=()=>{i.current.clear(),o(!1)};return c?.addEventListener("keydown",u),c?.addEventListener("keyup",p),window.addEventListener("blur",f),window.addEventListener("contextmenu",f),()=>{c?.removeEventListener("keydown",u),c?.removeEventListener("keyup",p),window.removeEventListener("blur",f),window.removeEventListener("contextmenu",f)}}},[e,o]),n}function TV(e,r,n){return e.filter(o=>n||o.length===r.size).some(o=>o.every(a=>r.has(a)))}function jV(e,r){return r.includes(e)?"code":"key"}const sSe=()=>{const e=vr();return S.useMemo(()=>({zoomIn:r=>{const{panZoom:n}=e.getState();return n?n.scaleBy(1.2,{duration:r?.duration}):Promise.resolve(!1)},zoomOut:r=>{const{panZoom:n}=e.getState();return n?n.scaleBy(1/1.2,{duration:r?.duration}):Promise.resolve(!1)},zoomTo:(r,n)=>{const{panZoom:o}=e.getState();return o?o.scaleTo(r,{duration:n?.duration}):Promise.resolve(!1)},getZoom:()=>e.getState().transform[2],setViewport:async(r,n)=>{const{transform:[o,a,i],panZoom:l}=e.getState();return l?(await l.setViewport({x:r.x??o,y:r.y??a,zoom:r.zoom??i},n),Promise.resolve(!0)):Promise.resolve(!1)},getViewport:()=>{const[r,n,o]=e.getState().transform;return{x:r,y:n,zoom:o}},setCenter:async(r,n,o)=>e.getState().setCenter(r,n,o),fitBounds:async(r,n)=>{const{width:o,height:a,minZoom:i,maxZoom:l,panZoom:s}=e.getState(),c=Ws(r,o,a,i,l,n?.padding??.1);return s?(await s.setViewport(c,{duration:n?.duration,ease:n?.ease,interpolate:n?.interpolate}),Promise.resolve(!0)):Promise.resolve(!1)},screenToFlowPosition:(r,n={})=>{const{transform:o,snapGrid:a,snapToGrid:i,domNode:l}=e.getState();if(!l)return r;const{x:s,y:c}=l.getBoundingClientRect(),d={x:r.x-s,y:r.y-c},u=n.snapGrid??a,p=n.snapToGrid??i;return G1(d,o,p,u)},flowToScreenPosition:r=>{const{transform:n,domNode:o}=e.getState();if(!o)return r;const{x:a,y:i}=o.getBoundingClientRect(),l=Yx(r,n);return{x:l.x+a,y:l.y+i}}}),[])};function AV(e,r){const n=[],o=new Map,a=[];for(const i of e)if(i.type==="add"){a.push(i);continue}else if(i.type==="remove"||i.type==="replace")o.set(i.id,[i]);else{const l=o.get(i.id);l?l.push(i):o.set(i.id,[i])}for(const i of r){const l=o.get(i.id);if(!l){n.push(i);continue}if(l[0].type==="remove")continue;if(l[0].type==="replace"){n.push({...l[0].item});continue}const s={...i};for(const c of l)cSe(c,s);n.push(s)}return a.length&&a.forEach(i=>{i.index!==void 0?n.splice(i.index,0,{...i.item}):n.push({...i.item})}),n}function cSe(e,r){switch(e.type){case"select":{r.selected=e.selected;break}case"position":{typeof e.position<"u"&&(r.position=e.position),typeof e.dragging<"u"&&(r.dragging=e.dragging);break}case"dimensions":{typeof e.dimensions<"u"&&(r.measured={...e.dimensions},e.setAttributes&&((e.setAttributes===!0||e.setAttributes==="width")&&(r.width=e.dimensions.width),(e.setAttributes===!0||e.setAttributes==="height")&&(r.height=e.dimensions.height))),typeof e.resizing=="boolean"&&(r.resizing=e.resizing);break}}}function rw(e,r){return AV(e,r)}function nw(e,r){return AV(e,r)}function Qu(e,r){return{id:e,type:"select",selected:r}}function uf(e,r=new Set,n=!1){const o=[];for(const[a,i]of e){const l=r.has(a);!(i.selected===void 0&&!l)&&i.selected!==l&&(n&&(i.selected=l),o.push(Qu(i.id,l)))}return o}function DV({items:e=[],lookup:r}){const n=[],o=new Map(e.map(a=>[a.id,a]));for(const[a,i]of e.entries()){const l=r.get(i.id),s=l?.internals?.userNode??l;s!==void 0&&s!==i&&n.push({id:i.id,item:i,type:"replace"}),s===void 0&&n.push({item:i,type:"add",index:a})
M${z.x},${z.y}h${z.width}v${z.height}h${-z.width}z`,fillRule:"evenodd",pointerEvents:"none"})]})})}wq.displayName="MiniMap",S.memo(wq);const JEe=e=>r=>e?`${Math.max(1/r.transform[2],1)}`:void 0,eCe={[df.Line]:"right",[df.Handle]:"bottom-right"};function tCe({nodeId:e,position:r,variant:n=df.Handle,className:o,style:a=void 0,children:i,color:l,minWidth:s=10,minHeight:c=10,maxWidth:d=Number.MAX_VALUE,maxHeight:u=Number.MAX_VALUE,keepAspectRatio:p=!1,resizeDirection:f,autoScale:g=!0,shouldResize:v,onResizeStart:w,onResize:x,onResizeEnd:k}){const C=e9(),_=typeof e=="string"?e:C,$=vr(),R=S.useRef(null),T=n===df.Handle,A=Dt(S.useCallback(JEe(T&&g),[T,g]),jr),z=S.useRef(null),j=r??eCe[n];S.useEffect(()=>{if(!(!R.current||!_))return z.current||(z.current=D9e({domNode:R.current,nodeId:_,getStoreItems:()=>{const{nodeLookup:P,transform:L,snapGrid:H,snapToGrid:M,nodeOrigin:V,domNode:B}=$.getState();return{nodeLookup:P,transform:L,snapGrid:H,snapToGrid:M,nodeOrigin:V,paneDomNode:B}},onChange:(P,L)=>{const{triggerNodeChanges:H,nodeLookup:M,parentLookup:V,nodeOrigin:B}=$.getState(),F=[],q={x:P.x,y:P.y},G=M.get(_);if(G&&G.expandParent&&G.parentId){const U=G.origin??B,Y=P.width??G.measured.width??0,Z=P.height??G.measured.height??0,O={id:G.id,parentId:G.parentId,rect:{width:Y,height:Z,...DF({x:P.x??G.position.x,y:P.y??G.position.y},{width:Y,height:Z},G.parentId,M,U)}},W=q7([O],M,V,B);F.push(...W),q.x=P.x?Math.max(U[0]*Y,P.x):void 0,q.y=P.y?Math.max(U[1]*Z,P.y):void 0}if(q.x!==void 0&&q.y!==void 0){const U={id:_,type:"position",position:{...q}};F.push(U)}if(P.width!==void 0&&P.height!==void 0){const U={id:_,type:"dimensions",resizing:!0,setAttributes:f?f==="horizontal"?"width":"height":!0,dimensions:{width:P.width,height:P.height}};F.push(U)}for(const U of L){const Y={...U,type:"position"};F.push(Y)}H(F)},onEnd:({width:P,height:L})=>{const H={id:_,type:"dimensions",resizing:!1,dimensions:{width:P,height:L}};$.getState().triggerNodeChanges([H])}})),z.current.update({controlPosition:j,boundaries:{minWidth:s,minHeight:c,maxWidth:d,maxHeight:u},keepAspectRatio:p,resizeDirection:f,onResizeStart:w,onResize:x,onResizeEnd:k,shouldResize:v}),()=>{z.current?.destroy()}},[j,s,c,d,u,p,w,x,k,v]);const I=j.split("-");return y.jsx("div",{className:dn(["react-flow__resize-control","nodrag",...I,n,o]),ref:R,style:{...a,scale:A,...l&&{[T?"backgroundColor":"borderColor"]:l}},children:i})}S.memo(tCe);const rCe=e=>e.domNode?.querySelector(".react-flow__renderer");function nCe({children:e}){const r=Dt(rCe);return r?Vi.createPortal(e,r):null}const oCe=(e,r)=>e?.internals.positionAbsolute.x!==r?.internals.positionAbsolute.x||e?.internals.positionAbsolute.y!==r?.internals.positionAbsolute.y||e?.measured.width!==r?.measured.width||e?.measured.height!==r?.measured.height||e?.selected!==r?.selected||e?.internals.z!==r?.internals.z,aCe=(e,r)=>{if(e.size!==r.size)return!1;for(const[n,o]of e)if(oCe(o,r.get(n)))return!1;return!0},iCe=e=>({x:e.transform[0],y:e.transform[1],zoom:e.transform[2],selectedNodesCount:e.nodes.filter(r=>r.selected).length});function r9({nodeId:e,children:r,className:n,style:o,isVisible:a,position:i=Ue.Top,offset:l=10,align:s="center",...c}){const d=e9(),u=S.useCallback($=>(Array.isArray(e)?e:[e||d||""]).reduce((R,T)=>{const A=$.nodeLookup.get(T);return A&&R.set(A.id,A),R},new Map),[e,d]),p=Dt(u,aCe),{x:f,y:g,zoom:v,selectedNodesCount:w}=Dt(iCe,jr);if(!(typeof a=="boolean"?a:p.size===1&&p.values().next().value?.selected&&w===1)||!p.size)return null;const x=nf(p),k=Array.from(p.values()),C=Math.max(...k.map($=>$.internals.z+1)),_={position:"absolute",transform:r9e(x,{x:f,y:g,zoom:v},i,l,s),zIndex:C,...o};return y.jsx(nCe,{children:y.jsx("div",{style:_,className:dn(["react-flow__node-toolbar",n]),...c,"data-id":k.reduce(($,R)=>`${$}${R.id} `,"").trim(),children:r})})}const{getOwnPropertyNames:lCe,getOwnPropertySymbols:sCe}=Object,{hasOwnProperty:cCe}=Object.prototype;function n9(e,r){return function(n,o,a){return e(n,o,a)&&r(n,o,a)}}function cw(e){return function(r,n,o){if(!r||!n||typeof r!="object"||typeof n!="object")return e(r,n,o);const
.`.concat(eRe,` {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
overflow: hidden `).concat(o,`;
2025-12-16 12:13:34 +01:00
padding-right: `).concat(s,"px ").concat(o,`;
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
}
body[`).concat(ff,`] {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
overflow: hidden `).concat(o,`;
overscroll-behavior: contain;
`).concat([r&&"position: relative ".concat(o,";"),n==="margin"&&`
padding-left: `.concat(a,`px;
padding-top: `).concat(i,`px;
2025-12-16 12:13:34 +01:00
padding-right: `).concat(l,`px;
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
margin-left:0;
margin-top:0;
2025-12-16 12:13:34 +01:00
margin-right: `).concat(s,"px ").concat(o,`;
`),n==="padding"&&"padding-right: ".concat(s,"px ").concat(o,";")].filter(Boolean).join(""),`
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
}
.`).concat(bw,` {
2025-12-16 12:13:34 +01:00
right: `).concat(s,"px ").concat(o,`;
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
}
.`).concat(xw,` {
2025-12-16 12:13:34 +01:00
margin-right: `).concat(s,"px ").concat(o,`;
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
}
.`).concat(bw," .").concat(bw,` {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
right: 0 `).concat(o,`;
}
.`).concat(xw," .").concat(xw,` {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
margin-right: 0 `).concat(o,`;
}
body[`).concat(ff,`] {
`).concat(tRe,": ").concat(s,`px;
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
}
`)},Qq=function(){var e=parseInt(document.body.getAttribute(ff)||"0",10);return isFinite(e)?e:0},xRe=function(){S.useEffect(function(){return document.body.setAttribute(ff,(Qq()+1).toString()),function(){var e=Qq()-1;e<=0?document.body.removeAttribute(ff):document.body.setAttribute(ff,e.toString())}},[])},wRe=function(e){var r=e.noRelative,n=e.noImportant,o=e.gapMode,a=o===void 0?"margin":o;xRe();var i=S.useMemo(function(){return yRe(a)},[a]);return S.createElement(vRe,{styles:bRe(i,!r,a,n?"":"!important")})},u9=!1;if(typeof window<"u")try{var kw=Object.defineProperty({},"passive",{get:function(){return u9=!0,!0}});window.addEventListener("test",kw,kw),window.removeEventListener("test",kw,kw)}catch{u9=!1}var mf=u9?{passive:!1}:!1,kRe=function(e){return e.tagName==="TEXTAREA"},Jq=function(e,r){if(!(e instanceof Element))return!1;var n=window.getComputedStyle(e);return n[r]!=="hidden"&&!(n.overflowY===n.overflowX&&!kRe(e)&&n[r]==="visible")},_Re=function(e){return Jq(e,"overflowY")},SRe=function(e){return Jq(e,"overflowX")},eH=function(e,r){var n=r.ownerDocument,o=r;do{typeof ShadowRoot<"u"&&o instanceof ShadowRoot&&(o=o.host);var a=tH(e,o);if(a){var i=rH(e,o),l=i[1],s=i[2];if(l>s)return!0}o=o.parentNode}while(o&&o!==n.body);return!1},ERe=function(e){var r=e.scrollTop,n=e.scrollHeight,o=e.clientHeight;return[r,n,o]},CRe=function(e){var r=e.scrollLeft,n=e.scrollWidth,o=e.clientWidth;return[r,n,o]},tH=function(e,r){return e==="v"?_Re(r):SRe(r)},rH=function(e,r){return e==="v"?ERe(r):CRe(r)},$Re=function(e,r){return e==="h"&&r==="rtl"?-1:1},RRe=function(e,r,n,o,a){var i=$Re(e,window.getComputedStyle(r).direction),l=i*o,s=n.target,c=r.contains(s),d=!1,u=l>0,p=0,f=0;do{if(!s)break;var g=rH(e,s),v=g[0],w=g[1],x=g[2],k=w-x-i*v;(v||k)&&tH(e,s)&&(p+=k,f+=v);var C=s.parentNode;s=C&&C.nodeType===Node.DOCUMENT_FRAGMENT_NODE?C.host:C}while(!c&&s!==document.body||c&&(r.contains(s)||r===s));return(u&&Math.abs(p)<1||!u&&Math.abs(f)<1)&&(d=!0),d},_w=function(e){return"changedTouches"in e?[e.changedTouches[0].clientX,e.changedTouches[0].clientY]:[0,0]},nH=function(e){return[e.deltaX,e.deltaY]},oH=function(e){return e&&"current"in e?e.current:e},zRe=function(e,r){return e[0]===r[0]&&e[1]===r[1]},TRe=function(e){return`
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
.block-interactivity-`.concat(e,` {pointer-events: none;}
.allow-interactivity-`).concat(e,` {pointer-events: all;}
`)},jRe=0,gf=[];function ARe(e){var r=S.useRef([]),n=S.useRef([0,0]),o=S.useRef(),a=S.useState(jRe++)[0],i=S.useState(Kq)[0],l=S.useRef(e);S.useEffect(function(){l.current=e},[e]),S.useEffect(function(){if(e.inert){document.body.classList.add("block-interactivity-".concat(a));var w=J$e([e.lockRef.current],(e.shards||[]).map(oH)).filter(Boolean);return w.forEach(function(x){return x.classList.add("allow-interactivity-".concat(a))}),function(){document.body.classList.remove("block-interactivity-".concat(a)),w.forEach(function(x){return x.classList.remove("allow-interactivity-".concat(a))})}}},[e.inert,e.lockRef.current,e.shards]);var s=S.useCallback(function(w,x){if("touches"in w&&w.touches.length===2||w.type==="wheel"&&w.ctrlKey)return!l.current.allowPinchZoom;var k=_w(w),C=n.current,_="deltaX"in w?w.deltaX:C[0]-k[0],$="deltaY"in w?w.deltaY:C[1]-k[1],R,T=w.target,A=Math.abs(_)>Math.abs($)?"h":"v";if("touches"in w&&A==="h"&&T.type==="range")return!1;var z=eH(A,T);if(!z)return!0;if(z?R=A:(R=A==="v"?"h":"v",z=eH(A,T)),!z)return!1;if(!o.current&&"changedTouches"in w&&(_||$)&&(o.current=R),!R)return!0;var j=o.current||R;return RRe(j,x,w,j==="h"?_:$)},[]),c=S.useCallback(function(w){var x=w;if(!(!gf.length||gf[gf.length-1]!==i)){var k="deltaY"in x?nH(x):_w(x),C=r.current.filter(function(R){return R.name===x.type&&(R.target===x.target||x.target===R.shadowParent)&&zRe(R.delta,k)})[0];if(C&&C.should){x.cancelable&&x.preventDefault();return}if(!C){var _=(l.current.shards||[]).map(oH).filter(Boolean).filter(function(R){return R.contains(x.target)}),$=_.length>0?s(x,_[0]):!l.current.noIsolation;$&&x.cancelable&&x.preventDefault()}}},[]),d=S.useCallback(function(w,x,k,C){var _={name:w,delta:x,target:k,should:C,shadowParent:DRe(k)};r.current.push(_),setTimeout(function(){r.current=r.current.filter(function($){return $!==_})},1)},[]),u=S.useCallback(function(w){n.current=_w(w),o.current=void 0},[]),p=S.useCallback(function(w){d(w.type,nH(w),w.target,s(w,e.lockRef.current))},[]),f=S.useCallback(function(w){d(w.type,_w(w),w.target,s(w,e.lockRef.current))},[]);S.useEffect(function(){return gf.push(i),e.setCallbacks({onScrollCapture:p,onWheelCapture:p,onTouchMoveCapture:f}),document.addEventListener("wheel",c,mf),document.addEventListener("touchmove",c,mf),document.addEventListener("touchstart",u,mf),function(){gf=gf.filter(function(w){return w!==i}),document.removeEventListener("wheel",c,mf),document.removeEventListener("touchmove",c,mf),document.removeEventListener("touchstart",u,mf)}},[]);var g=e.removeScrollBar,v=e.inert;return S.createElement(S.Fragment,null,v?S.createElement(i,{styles:TRe(a)}):null,g?S.createElement(wRe,{noRelative:e.noRelative,gapMode:e.gapMode}):null)}function DRe(e){for(var r=null;e!==null;)e instanceof ShadowRoot&&(r=e.host,e=e.host),e=e.parentNode;return r}const MRe=sRe(Zq,ARe);var ny=S.forwardRef(function(e,r){return S.createElement(ww,Yl({},e,{ref:r,sideCar:MRe}))});ny.classNames=ww.classNames;function So(e){return Object.keys(e)}function p9(e){return e&&typeof e=="object"&&!Array.isArray(e)}function h9(e,r){const n={...e},o=r;return p9(e)&&p9(r)&&Object.keys(r).forEach(a=>{p9(o[a])&&a in e?n[a]=h9(n[a],o[a]):n[a]=o[a]}),n}function NRe(e){return e.replace(/[A-Z]/g,r=>`-${r.toLowerCase()}`)}function PRe(e){return typeof e!="string"||!e.includes("var(--mantine-scale)")?e:e.match(/^calc\((.*?)\)$/)?.[1].split("*")[0].trim()}function f9(e){const r=PRe(e);return typeof r=="number"?r:typeof r=="string"?r.includes("calc")||r.includes("var")?r:r.includes("px")?Number(r.replace("px","")):r.includes("rem")?Number(r.replace("rem",""))*16:r.includes("em")?Number(r.replace("em",""))*16:Number(r):NaN}function aH(e){return e==="0rem"?"0rem":`calc(${e} * var(--mantine-scale))`}function iH(e,{shouldScale:r=!1}={}){function n(o){if(o===0||o==="0")return`0${e}`;if(typeof o=="number"){const a=`${o/16}${e}`;return r?aH(a):a}if(typeof o=="string"){if(o===""||o.startsWith("calc(")||o.startsWith("clamp(")||o.includes("rgba("))return o;if(o.includes(","))return o.split(",").map(i=>n(i)).join(",");if(o.includes(" "))return o.split(" ")
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
${c}
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
${d}`}function $9({color:e,theme:r,autoContrast:n}){return(typeof n=="boolean"?n:r.autoContrast)&&vd({color:e||r.primaryColor,theme:r}).isLight?"var(--mantine-color-black)":"var(--mantine-color-white)"}function IH(e,r){return $9({color:e.colors[e.primaryColor][ly(e,r)],theme:e,autoContrast:null})}function Nw({theme:e,color:r,colorScheme:n,name:o=r,withColorValues:a=!0}){if(!e.colors[r])return{};if(n==="light"){const s=ly(e,"light"),c={[`--mantine-color-${o}-text`]:`var(--mantine-color-${o}-filled)`,[`--mantine-color-${o}-filled`]:`var(--mantine-color-${o}-${s})`,[`--mantine-color-${o}-filled-hover`]:`var(--mantine-color-${o}-${s===9?8:s+1})`,[`--mantine-color-${o}-light`]:_f(e.colors[r][s],.1),[`--mantine-color-${o}-light-hover`]:_f(e.colors[r][s],.12),[`--mantine-color-${o}-light-color`]:`var(--mantine-color-${o}-${s})`,[`--mantine-color-${o}-outline`]:`var(--mantine-color-${o}-${s})`,[`--mantine-color-${o}-outline-hover`]:_f(e.colors[r][s],.05)};return a?{[`--mantine-color-${o}-0`]:e.colors[r][0],[`--mantine-color-${o}-1`]:e.colors[r][1],[`--mantine-color-${o}-2`]:e.colors[r][2],[`--mantine-color-${o}-3`]:e.colors[r][3],[`--mantine-color-${o}-4`]:e.colors[r][4],[`--mantine-color-${o}-5`]:e.colors[r][5],[`--mantine-color-${o}-6`]:e.colors[r][6],[`--mantine-color-${o}-7`]:e.colors[r][7],[`--mantine-color-${o}-8`]:e.colors[r][8],[`--mantine-color-${o}-9`]:e.colors[r][9],...c}:c}const i=ly(e,"dark"),l={[`--mantine-color-${o}-text`]:`var(--mantine-color-${o}-4)`,[`--mantine-color-${o}-filled`]:`var(--mantine-color-${o}-${i})`,[`--mantine-color-${o}-filled-hover`]:`var(--mantine-color-${o}-${i===9?8:i+1})`,[`--mantine-color-${o}-light`]:_f(e.colors[r][Math.max(0,i-2)],.15),[`--mantine-color-${o}-light-hover`]:_f(e.colors[r][Math.max(0,i-2)],.2),[`--mantine-color-${o}-light-color`]:`var(--mantine-color-${o}-${Math.max(i-5,0)})`,[`--mantine-color-${o}-outline`]:`var(--mantine-color-${o}-${Math.max(i-4,0)})`,[`--mantine-color-${o}-outline-hover`]:_f(e.colors[r][Math.max(i-4,0)],.05)};return a?{[`--mantine-color-${o}-0`]:e.colors[r][0],[`--mantine-color-${o}-1`]:e.colors[r][1],[`--mantine-color-${o}-2`]:e.colors[r][2],[`--mantine-color-${o}-3`]:e.colors[r][3],[`--mantine-color-${o}-4`]:e.colors[r][4],[`--mantine-color-${o}-5`]:e.colors[r][5],[`--mantine-color-${o}-6`]:e.colors[r][6],[`--mantine-color-${o}-7`]:e.colors[r][7],[`--mantine-color-${o}-8`]:e.colors[r][8],[`--mantine-color-${o}-9`]:e.colors[r][9],...l}:l}function Yze(e){return!!e&&typeof e=="object"&&"mantine-virtual-color"in e}function Sf(e,r,n){So(r).forEach(o=>Object.assign(e,{[`--mantine-${n}-${o}`]:r[o]}))}const OH=e=>{const r=ly(e,"light"),n=e.defaultRadius in e.radius?e.radius[e.defaultRadius]:$e(e.defaultRadius),o={variables:{"--mantine-z-index-app":"100","--mantine-z-index-modal":"200","--mantine-z-index-popover":"300","--mantine-z-index-overlay":"400","--mantine-z-index-max":"9999","--mantine-scale":e.scale.toString(),"--mantine-cursor-type":e.cursorType,"--mantine-webkit-font-smoothing":e.fontSmoothing?"antialiased":"unset","--mantine-moz-font-smoothing":e.fontSmoothing?"grayscale":"unset","--mantine-color-white":e.white,"--mantine-color-black":e.black,"--mantine-line-height":e.lineHeights.md,"--mantine-font-family":e.fontFamily,"--mantine-font-family-monospace":e.fontFamilyMonospace,"--mantine-font-family-headings":e.headings.fontFamily,"--mantine-heading-font-weight":e.headings.fontWeight,"--mantine-heading-text-wrap":e.headings.textWrap,"--mantine-radius-default":n,"--mantine-primary-color-filled":`var(--mantine-color-${e.primaryColor}-filled)`,"--mantine-primary-color-filled-hover":`var(--mantine-color-${e.primaryColor}-filled-hover)`,"--mantine-primary-color-light":`var(--mantine-color-${e.primaryColor}-light)`,"--mantine-primary-color-light-hover":`var(--mantine-color-${e.primaryColor}-light-hover)`,"--mantine-primary-color-light-color":`var(--mantine-color-${e.primaryColor}-light-color)`},light:{"--mantine-color-scheme":"light","--mantine-primary-color-contrast":IH(e,"light"),"--mantine-color-bright":"var(--mantine-color-black)","--mantine-color-text
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
--colors-likec4-tag-bg: ${r};
2025-12-16 12:13:34 +01:00
--colors-likec4-tag-bg-hover: color-mix(in oklab, ${r}, var(--colors-likec4-mix-color) 20%);
`;if(!vNe.includes(r))return"";let n="12";return["mint","grass","lime","yellow","amber"].includes(r)&&(n="dark-2"),`
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
--colors-likec4-tag-border: var(--colors-${r}-8);
--colors-likec4-tag-bg: var(--colors-${r}-9);
--colors-likec4-tag-bg-hover: var(--colors-${r}-10);
--colors-likec4-tag-text: var(--colors-${r}-${n});
`};function xNe(e,r){return!e||tp(e)?"":Jr(uw(e),Mq(([n,o])=>[`:is(${r} [data-likec4-tag="${n}"]) {`,bNe(o),"}"]),Lq(`
`))}function wNe({children:e,rootSelector:r}){const n=yNe().tags,o=xNe(n,r);return y.jsxs(AG.Provider,{value:n,children:[o!==""&&y.jsx(kNe,{stylesheet:o}),e]})}const kNe=S.memo(({stylesheet:e})=>{const r=np()?.();return y.jsx("style",{"data-likec4-tags":!0,type:"text/css",dangerouslySetInnerHTML:{__html:e},nonce:r})});function _Ne(e){return S.useContext(AG)[e]??{color:"tomato"}}function DG(){return oi().replace("mantine-","likec4-")}var SNe="css,pos,insetX,insetY,insetEnd,end,insetStart,start,flexDir,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,textShadowColor,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,bgLinear,bgRadial,bgConic,rounded,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,z,scrollMarginY,scrollMarginX,scrollPaddingY,scrollPaddingX,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,inset,insetInline,insetBlock,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,spaceX,spaceY,outlineWidth,outlineColor,outline,outlineOffset,focusRing,focusVisibleRing,focusRingColor,focusRingOffset,focusRingWidth,focusRingStyle,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,boxSize,color,fontFamily,fontSize,fontSizeAdjust,fontPalette,fontKerning,fontFeatureSettings,fontWeight,fontSmoothing,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariationSettings,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,WebkitTextFillColor,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,listStyle,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,backgroundLinear,backgroundRadial,backgroundConic,textGradient,gradientFromPosition,gradientToPosition,gradientFrom,gradientTo,gradientVia,gradientViaPosition,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,borderBlockStartWidth,borderBlockEndWidth,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,border
${i.message}`)}else throw new Error(`Invalid target: "${n}" is not a valid target from the root node. Did you mean ".${n}"?`)})}function dY(e){const r=oY(e.config.target);return r?{target:r.map(n=>typeof n=="string"?M3(e.parent,n):n)}:e.parent.initial}function yp(e){return e.type==="history"}function uY(e){const r=pY(e);for(const n of r)for(const o of Ry(n,e))r.add(o);return r}function pY(e){const r=new Set;function n(o){if(!r.has(o)){if(r.add(o),o.type==="compound")n(o.initial.target[0]);else if(o.type==="parallel")for(const a of Hf(o))n(a)}}return n(e),r}function Uf(e,r){if(D3(r))return e.machine.getStateNodeById(r);if(!e.states)throw new Error(`Unable to retrieve child state '${r}' from '${e.id}'; no child states exist.`);const n=e.states[r];if(!n)throw new Error(`Child state '${r}' does not exist on '${e.id}'`);return n}function M3(e,r){if(typeof r=="string"&&D3(r))try{return e.machine.getStateNodeById(r)}catch{}const n=tE(r).slice();let o=e;for(;n.length;){const a=n.shift();if(!a.length)break;o=Uf(o,a)}return o}function N3(e,r){if(typeof r=="string"){const a=e.states[r];if(!a)throw new Error(`State '${r}' does not exist on '${e.id}'`);return[e,a]}const n=Object.keys(r),o=n.map(a=>Uf(e,a)).filter(Boolean);return[e.machine.root,e].concat(o,n.reduce((a,i)=>{const l=Uf(e,i);if(!l)return a;const s=N3(l,r[i]);return a.concat(s)},[]))}function fPe(e,r,n,o){const a=Uf(e,r).next(n,o);return!a||!a.length?e.next(n,o):a}function mPe(e,r,n,o){const a=Object.keys(r),i=Uf(e,a[0]),l=sE(i,r[a[0]],n,o);return!l||!l.length?e.next(n,o):l}function gPe(e,r,n,o){const a=[];for(const i of Object.keys(r)){const l=r[i];if(!l)continue;const s=Uf(e,i),c=sE(s,l,n,o);c&&a.push(...c)}return a.length?a:e.next(n,o)}function sE(e,r,n,o){return typeof r=="string"?fPe(e,r,n,o):Object.keys(r).length===1?mPe(e,r,n,o):gPe(e,r,n,o)}function yPe(e){return Object.keys(e.states).map(r=>e.states[r]).filter(r=>r.type==="history")}function Cd(e,r){let n=e;for(;n.parent&&n.parent!==r;)n=n.parent;return n.parent===r}function vPe(e,r){const n=new Set(e),o=new Set(r);for(const a of n)if(o.has(a))return!0;for(const a of o)if(n.has(a))return!0;return!1}function hY(e,r,n){const o=new Set;for(const a of e){let i=!1;const l=new Set;for(const s of o)if(vPe(dE([a],r,n),dE([s],r,n)))if(Cd(a.source,s.source))l.add(s);else{i=!0;break}if(!i){for(const s of l)o.delete(s);o.add(a)}}return Array.from(o)}function bPe(e){const[r,...n]=e;for(const o of Ry(r,void 0))if(n.every(a=>Cd(a,o)))return o}function cE(e,r){if(!e.target)return[];const n=new Set;for(const o of e.target)if(yp(o))if(r[o.id])for(const a of r[o.id])n.add(a);else for(const a of cE(dY(o),r))n.add(a);else n.add(o);return[...n]}function fY(e,r){const n=cE(e,r);if(!n)return;if(!e.reenter&&n.every(a=>a===e.source||Cd(a,e.source)))return e.source;const o=bPe(n.concat(e.source));if(o)return o;if(!e.reenter)return e.source.machine.root}function dE(e,r,n){const o=new Set;for(const a of e)if(a.target?.length){const i=fY(a,n);a.reenter&&a.source===i&&o.add(i);for(const l of r)Cd(l,i)&&o.add(l)}return[...o]}function xPe(e,r){if(e.length!==r.size)return!1;for(const n of e)if(!r.has(n))return!1;return!0}function uE(e,r,n,o,a,i){if(!e.length)return r;const l=new Set(r._nodes);let s=r.historyValue;const c=hY(e,l,s);let d=r;a||([d,s]=SPe(d,o,n,c,l,s,i,n.actionExecutor)),d=Gf(d,o,n,c.flatMap(p=>p.actions),i,void 0),d=kPe(d,o,n,c,l,i,s,a);const u=[...l];d.status==="done"&&(d=Gf(d,o,n,u.sort((p,f)=>f.order-p.order).flatMap(p=>p.exit),i,void 0));try{return s===r.historyValue&&xPe(r._nodes,l)?d:vp(d,{_nodes:u,historyValue:s})}catch(p){throw p}}function wPe(e,r,n,o,a){if(o.output===void 0)return;const i=eE(a.id,a.output!==void 0&&a.parent?rE(a.output,e.context,r,n.self):void 0);return rE(o.output,e.context,i,n.self)}function kPe(e,r,n,o,a,i,l,s){let c=e;const d=new Set,u=new Set;_Pe(o,l,u,d),s&&u.add(e.machine.root);const p=new Set;for(const f of[...d].sort((g,v)=>g.order-v.order)){a.add(f);const g=[];g.push(...f.entry);for(const v of f.invoke)g.push(T3(v.src,{...v,syncSnapshot:!!v.onSnapshot}));if(u.has(f)){const v=f.initial.actions;g.
${p.message}`)}if(u){a.push(...s.actions),i=s;break}}return i?[i]:void 0}get events(){return Yf(this,"events",()=>{const{states:r}=this,n=new Set(this.ownEvents);if(r)for(const o of Object.keys(r)){const a=r[o];if(a.states)for(const i of a.events)n.add(`${i}`)}return Array.from(n)})}get ownEvents(){const r=new Set([...this.transitions.keys()].filter(n=>this.transitions.get(n).some(o=>!(!o.target&&!o.actions.length&&!o.reenter))));return Array.from(r)}}const FPe="#";class fE{constructor(r,n){this.config=r,this.version=void 0,this.schemas=void 0,this.implementations=void 0,this.__xstatenode=!0,this.idMap=new Map,this.root=void 0,this.id=void 0,this.states=void 0,this.events=void 0,this.id=r.id||"(machine)",this.implementations={actors:n?.actors??{},actions:n?.actions??{},delays:n?.delays??{},guards:n?.guards??{}},this.version=this.config.version,this.schemas=this.config.schemas,this.transition=this.transition.bind(this),this.getInitialSnapshot=this.getInitialSnapshot.bind(this),this.getPersistedSnapshot=this.getPersistedSnapshot.bind(this),this.restoreSnapshot=this.restoreSnapshot.bind(this),this.start=this.start.bind(this),this.root=new O3(r,{_key:this.id,_machine:this}),this.root._initialize(),this.states=this.root.states,this.events=this.root.events}provide(r){const{actions:n,guards:o,actors:a,delays:i}=this.implementations;return new fE(this.config,{actions:{...n,...r.actions},guards:{...o,...r.guards},actors:{...a,...r.actors},delays:{...i,...r.delays}})}resolveState(r){const n=$Pe(this.root,r.value),o=A3(N3(this.root,n));return P3({_nodes:[...o],context:r.context||{},children:{},status:lE(o,this.root)?"done":r.status||"active",output:r.output,error:r.error,historyValue:r.historyValue},this)}transition(r,n,o){return hE(r,n,o,[]).snapshot}microstep(r,n,o){return hE(r,n,o,[]).microstates}getTransitionData(r,n){return sE(this.root,r.value,r,n)||[]}getPreInitialState(r,n,o){const{context:a}=this.config,i=P3({context:typeof a!="function"&&a?a:{},_nodes:[this.root],children:{},status:"active"},this);return typeof a=="function"?Gf(i,n,r,[Bt(({spawn:l,event:s,self:c})=>a({spawn:l,input:s.input,self:c}))],o,void 0):i}getInitialSnapshot(r,n){const o=QG(n),a=[],i=this.getPreInitialState(r,o,a),l=uE([{target:[...pY(this.root)],source:this.root,reenter:!0,actions:[],eventType:null,toJSON:null}],i,r,o,!0,a),{snapshot:s}=hE(l,o,r,a);return s}start(r){Object.values(r.children).forEach(n=>{n.getSnapshot().status==="active"&&n.start()})}getStateNodeById(r){const n=tE(r),o=n.slice(1),a=D3(n[0])?n[0].slice(FPe.length):n[0],i=this.idMap.get(a);if(!i)throw new Error(`Child state node '#${a}' does not exist on machine '${this.id}'`);return M3(i,o)}get definition(){return this.root.definition}toJSON(){return this.definition}getPersistedSnapshot(r,n){return NPe(r,n)}restoreSnapshot(r,n){const o={},a=r.children;Object.keys(a).forEach(p=>{const f=a[p],g=f.snapshot,v=f.src,w=typeof v=="string"?nE(this,v):v;if(!w)return;const x=qf(w,{id:p,parent:n.self,syncSnapshot:f.syncSnapshot,snapshot:g,src:v,systemId:f.systemId});o[p]=x});function i(p,f){if(f instanceof O3)return f;try{return p.machine.getStateNodeById(f.id)}catch{}}function l(p,f){if(!f||typeof f!="object")return{};const g={};for(const v in f){const w=f[v];for(const x of w){const k=i(p,x);k&&(g[v]??=[],g[v].push(k))}}return g}const s=l(this.root,r.historyValue),c=P3({...r,children:o,_nodes:Array.from(A3(N3(this.root,r.value))),historyValue:s},this),d=new Set;function u(p,f){if(!d.has(p)){d.add(p);for(const g in p){const v=p[g];if(v&&typeof v=="object"){if("xstate$$type"in v&&v.xstate$$type===aE){p[g]=f[v.id];continue}u(v,f)}}}}return u(c.context,o),c}}function VPe(e,r,n,o,{event:a}){const i=typeof a=="function"?a(n,o):a;return[r,{event:i},void 0]}function qPe(e,{event:r}){e.defer(()=>e.emit(r))}function mE(e){function r(n,o){}return r.type="xstate.emit",r.event=e,r.resolve=VPe,r.execute=qPe,r}let gE=(function(e){return e.Parent="#_parent",e.Internal="#_internal",e})({});function HPe(e,r,n,o,{to:a,event:i,id:l,delay:s},c){const d=r.machine.implementations.delays;if(typeof i=="string")throw
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
[data-motion-pop-id="${a}"] {
position: absolute !important;
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(QOe,{isPresent:r,childRef:i,sizeRef:l,children:S.cloneElement(e,{ref:c})})}const eLe=({children:e,initial:r,isPresent:n,onExitComplete:o,custom:a,presenceAffectsLayout:i,mode:l,anchorX:s,root:c})=>{const d=im(tLe),u=S.useId();let p=!0,f=S.useMemo(()=>(p=!1,{id:u,initial:r,isPresent:n,custom:a,onExitComplete:g=>{d.set(g,!0);for(const v of d.values())if(!v)return;o&&o()},register:g=>(d.set(g,!1),()=>d.delete(g))}),[n,d,o]);return i&&p&&(f={...f}),S.useMemo(()=>{d.forEach((g,v)=>d.set(v,!1))},[n]),S.useEffect(()=>{!n&&!d.size&&o&&o()},[n]),l==="popLayout"&&(e=y.jsx(JOe,{isPresent:n,anchorX:s,root:c,children:e})),y.jsx(K3.Provider,{value:f,children:e})};function tLe(){return new Map}function SZ(e=!0){const r=S.useContext(K3);if(r===null)return[!0,null];const{isPresent:n,onExitComplete:o,register:a}=r,i=S.useId();S.useEffect(()=>{if(e)return a(i)},[e]);const l=S.useCallback(()=>e&&o&&o(i),[i,o,e]);return!n&&o?[!1,l]:[!0]}const Q3=e=>e.key||"";function EZ(e){const r=[];return S.Children.forEach(e,n=>{S.isValidElement(n)&&r.push(n)}),r}const Cn=({children:e,custom:r,initial:n=!0,onExitComplete:o,presenceAffectsLayout:a=!0,mode:i="sync",propagate:l=!1,anchorX:s="left",root:c})=>{const[d,u]=SZ(l),p=S.useMemo(()=>EZ(e),[e]),f=l&&!d?[]:p.map(Q3),g=S.useRef(!0),v=S.useRef(p),w=im(()=>new Map),[x,k]=S.useState(p),[C,_]=S.useState(p);EC(()=>{g.current=!1,v.current=p;for(let T=0;T<C.length;T++){const A=Q3(C[T]);f.includes(A)?w.delete(A):w.get(A)!==!0&&w.set(A,!1)}},[C,f.length,f.join("-")]);const $=[];if(p!==x){let T=[...p];for(let A=0;A<C.length;A++){const z=C[A],j=Q3(z);f.includes(j)||(T.splice(A,0,z),$.push(z))}return i==="wait"&&$.length&&(T=$),_(EZ(T)),k(p),null}const{forceRender:R}=S.useContext(Hy);return y.jsx(y.Fragment,{children:C.map(T=>{const A=Q3(T),z=l&&!d?!1:p===C||f.includes(A),j=()=>{if(w.has(A))w.set(A,!0);else return;let I=!0;w.forEach(P=>{P||(I=!1)}),I&&(R?.(),_(v.current),l&&u?.(),o&&o())};return y.jsx(eLe,{isPresent:z,initial:!g.current||n?void 0:!1,custom:r,presenceAffectsLayout:a,mode:i,root:c,onExitComplete:z?void 0:j,anchorX:s,children:T},A)})})},rLe=S.createContext(null);function nLe(){const e=S.useRef(!1);return EC(()=>(e.current=!0,()=>{e.current=!1}),[]),e}function oLe(){const e=nLe(),[r,n]=S.useState(0),o=S.useCallback(()=>{e.current&&n(r+1)},[r]);return[S.useCallback(()=>Dr.postRender(o),[o]),r]}const aLe=e=>!e.isLayoutDirty&&e.willUpdate(!1);function iLe(){const e=new Set,r=new WeakMap,n=()=>e.forEach(aLe);return{add:o=>{e.add(o),r.set(o,o.addEventListener("willUpdate",n))},remove:o=>{e.delete(o);const a=r.get(o);a&&(a(),r.delete(o)),n()},dirty:n}}const CZ=e=>e===!0,lLe=e=>CZ(e===!0)||e==="id",lm=({children:e,id:r,inherit:n=!0})=>{const o=S.useContext(Hy),a=S.useContext(rLe),[i,l]=oLe(),s=S.useRef(null),c=o.id||a;s.current===null&&(lLe(n)&&c&&(r=r?c+"-"+r:c),s.current={id:r,group:CZ(n)&&o.group||iLe()});const d=S.useMemo(()=>({...s.current,forceRender:i}),[l]);return y.jsx(Hy.Provider,{value:d,children:e})},CC=S.createContext({strict:!1});function $C(e){for(const r in e)om[r]={...om[r],...e[r]}}function sLe({children:e,features:r,strict:n=!1}){const[,o]=S.useState(!RC(r)),a=S.useRef(void 0);if(!RC(r)){const{renderer:i,...l}=r;a.current=i,$C(l)}return S.useEffect(()=>{RC(r)&&r().then(({renderer:i,...l})=>{$C(l),a.current=i,o(!0)})},[]),y.jsx(CC.Provider,{value:{renderer:a.current,strict:n},children:e})}function RC(e){return typeof e=="function"}const cLe=new Set(["animate","exit","variants","initial","style","values","variants","transition","transformTemplate","custom","inherit","onBeforeLayoutMeasure","onAnimationStart","onAnimationComplete","onUpdate","onDragStart","onDrag","onDragEnd","onMeasureDragConstraints","onDirectionLock","onDragTransitionEnd","_dragX","_dragY","onHoverStart","onHoverEnd","onViewportEnter","onViewportLeave","globalTapTarget","ignoreStrict","viewport"]);function J3(e){return e.startsWith("while")||e.startsWith("drag")&&e!=="draggable"||e.startsWith("layout")||e.startsWith("onTap")||e.startsWith("onPan")||e.startsWith("
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
linear-gradient(180deg,
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,
transparent 80px
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the 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, var(--likec4-palette-fill), var(--likec4-palette-fill) 4px, transparent 4px),
{colors.likec4.overlay.body}
]`,"& .react-flow__attribution":{display:"none"}}),XVe=fe({flex:0,cursor:"move"}),ZVe=fe({display:"block",fontFamily:"likec4.element",fontOpticalSizing:"auto",fontStyle:"normal",fontWeight:600,fontSize:"24px",lineHeight:"xs"}),a$="40px",KVe=fe({flex:`0 0 ${a$}`,height:a$,width:a$,display:"flex",alignItems:"center",justifyContent:"center",alignSelf:"flex-start",cursor:"move",_dark:{mixBlendMode:"hard-light"},"& :where(svg, img)":{width:"100%",height:"auto",maxHeight:"100%",pointerEvents:"none",filter:`
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
drop-shadow(0 0 3px rgb(0 0 0 / 10%))
drop-shadow(0 1px 8px rgb(0 0 0 / 5%))
drop-shadow(1px 1px 16px rgb(0 0 0 / 2%))
`},"& img":{objectFit:"contain"}}),f2="--view-title-color",m2="--icon-color",QVe=fe({width:"100%",background:"mantine.colors.body",borderRadius:"sm",padding:"[10px 8px]",transition:"fast",border:"1px dashed",borderColor:"mantine.colors.defaultBorder",[f2]:"{colors.mantine.colors.dark[1]}",_hover:{background:"mantine.colors.defaultHover",[m2]:"{colors.mantine.colors.dark[1]}",[f2]:"{colors.mantine.colors.defaultColor}"},_dark:{background:"mantine.colors.dark[6]"},_light:{[m2]:"{colors.mantine.colors.gray[6]}",[f2]:"{colors.mantine.colors.gray[7]}",_hover:{[m2]:"{colors.mantine.colors.gray[7]}"}},"& .mantine-ThemeIcon-root":{transition:"fast",color:`[var(${m2}, {colors.mantine.colors.dark[2]})]`,"--ti-size":"22px",_hover:{color:"mantine.colors.defaultColor"}},"& > *":{transition:"all 130ms {easings.inOut}"},"&:hover > *":{transitionTimingFunction:"out",transform:"translateX(1.6px)"}}),JVe=fe({transition:"fast",color:`[var(${f2}, {colors.mantine.colors.gray[7]})]`,fontSize:"15px",fontWeight:500,lineHeight:"1.4"}),eqe=fe({flex:1,display:"flex",flexDirection:"column",justifyContent:"stretch",overflow:"hidden",gap:"sm"}),tqe=fe({background:"mantine.colors.gray[1]",borderRadius:"sm",flexWrap:"nowrap",gap:"1.5",padding:"1",_dark:{background:"mantine.colors.dark[7]"}}),rqe=fe({fontSize:"xs",fontWeight:500,flexGrow:1,padding:"[6px 8px]",transition:"fast",borderRadius:"sm",color:"mantine.colors.gray[7]",_hover:{transitionTimingFunction:"out",color:"mantine.colors.defaultColor",background:"mantine.colors.gray[3]"},"&[data-active]":{transition:"none",background:"mantine.colors.white",shadow:"xs",color:"mantine.colors.defaultColor"},_dark:{color:"mantine.colors.dark[1]",_hover:{color:"mantine.colors.white",background:"mantine.colors.dark[6]"},"&:is([data-active])":{color:"mantine.colors.white",background:"mantine.colors.dark[5]"}}}),nqe=fe({flex:1,overflow:"hidden",position:"relative","&:not(:has(.mantine-ScrollArea-root))":{paddingLeft:"1",paddingRight:"1"},"& .mantine-ScrollArea-root":{width:"100%",height:"100%","& > div":{paddingLeft:"1",paddingRight:"1"}}}),oqe=fe({flex:1,display:"grid",gridTemplateColumns:"min-content 1fr",gridAutoRows:"min-content max-content",gap:"[24px 20px]",alignItems:"baseline",justifyItems:"stretch"}),aqe=fe({justifySelf:"end",textAlign:"right",userSelect:"none"}),iqe=fe({position:"absolute",width:"14px",height:"14px",border:"3.5px solid",borderColor:"mantine.colors.dark[3]",borderTop:"none",borderLeft:"none",borderRadius:"2px",bottom:"0.5",right:"0.5",transition:"fast",cursor:"se-resize",_hover:{borderWidth:"4px",borderColor:"mantine.colors.dark[1]"}}),lqe=[["path",{d:"M6 9l6 6l6 -6",key:"svg-0"}]],i$=wt("outline","chevron-down","ChevronDown",lqe),sqe=[["path",{d:"M9 6l6 6l-6 6",key:"svg-0"}]],Dd=wt("outline","chevron-right","ChevronRight",sqe);function pQ({children:e}){return y.jsx(y.Fragment,{children:e})}function hQ({value:e,isExpanded:r}){const[n,o]=S.useState(!1),a=S.useRef(null);return S.useEffect(()=>{a.current&&o(a.current.scrollWidth>a.current.clientWidth)},[e]),y.jsx(_n,{label:n&&!r?e:null,multiline:!0,w:300,withinPortal:!0,children:y.jsx(at,{ref:a,component:"div",className:fe({fontSize:"sm",padding:"xs",userSelect:"all",color:"mantine.colors.text",lineHeight:1.4,whiteSpace:r?"pre-wrap":"nowrap",overflow:r?"visible":"hidden",textOverflow:r?"unset":"ellipsis",wordBreak:r?"break-word":"normal",minWidth:0,width:"100%"}),children:e})})}function cqe({values:e,isExpanded:r}){return r?y.jsx(Lo,{gap:"xs",children:e.map((n,o)=>y.jsxs(Js,{align:"center",gap:"xs",children:[y.jsx(at,{className:fe({fontSize:"xs",color:"mantine.colors.gray[5]",fontWeight:500,flexShrink:0,_dark:{color:"mantine.colors.dark[3]"}}),children:"•"}),y.jsx(Se,{className:fe({minHeight:"32px",display:"flex",alignItems:"center",flex:1}),children:y.jsx(hQ,{value:n,isExpanded:!0})})]},o))}):y.jsx(Se,{className:fe({minHeight:"32px",display:"flex",alignItems:"center",padding:"xs",gap:"xs",flexWrap:"wrap",minWidth:0,overflow:"hidden"}),children:e.map((n,o)=>y.jsxs(Js,{align:"center",gap:"xs",style:{minWidth:0},children:[y.jsx(at,{classN
`)?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(Js,{align:"center",gap:"xs",children:[y.jsxs(at,{component:"span",size:"xs",fw:700,children:[e,":"]}),y.jsx(at,{component:"span",className:fe({fontSize:"xs",fontWeight:500,color:"mantine.colors.gray[6]",backgroundColor:"mantine.colors.gray[1]",padding:"[1px 4px]",borderRadius:"xs",_dark:{color:"mantine.colors.dark[2]",backgroundColor:"mantine.colors.dark[6]"}}),children:n.length}),a?y.jsx(i$,{size:12}):y.jsx(Dd,{size:12})]})}):y.jsxs(at,{component:"div",className:fe({fontSize:"xs",color:"mantine.colors.dimmed",justifySelf:"end",textAlign:"right",userSelect:"none",whiteSpace:"nowrap",padding:"[4px 8px]",fontWeight:700}),children:[e,":"]}),y.jsx(Se,{className:fe({justifySelf:"stretch",alignSelf:"start"}),children:o?y.jsx(cqe,{values:n,isExpanded:a}):y.jsx(Se,{className:fe({minHeight:"32px",display:"flex",alignItems:"center"}),children:y.jsx(hQ,{value:n[0]||"",isExpanded:a})})})]})}const uqe=fe({"&[data-level='1']":{marginBottom:"sm"}}),pqe=fe({cursor:"default",marginTop:"0",marginBottom:"0"}),fQ=fe({transition:"fast",color:"mantine.colors.gray[7]",_dark:{color:"mantine.colors.dark[1]"},"& > *":{transition:"fast"},_hover:{transitionTimingFunction:"out","& > :not([data-no-transform])":{transitionTimingFunction:"out",transform:"translateX(1px)"}}}),hqe=Ge(fQ),fqe=Ge(fQ,fe({cursor:"pointer",width:"100%",justifyContent:"stretch",flexWrap:"nowrap",height:"36px",paddingInlineStart:"[16px]",paddingInlineEnd:"2.5",borderRadius:"sm",alignItems:"center",color:"mantine.colors.gray[7]",_dark:{color:"mantine.colors.gray.lightColor"},_hover:{background:"mantine.colors.gray.lightHover"},"& .tabler-icon":{transition:"fast",width:"90%",opacity:.65}})),mqe=[["path",{d:"M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0",key:"svg-0"}],["path",{d:"M12 9h.01",key:"svg-1"}],["path",{d:"M11 12h1v4h1",key:"svg-2"}]],r0=wt("outline","info-circle","InfoCircle",mqe),gqe=[["path",{d:"M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0",key:"svg-0"}],["path",{d:"M12 12m-5 0a5 5 0 1 0 10 0a5 5 0 1 0 -10 0",key:"svg-1"}],["path",{d:"M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0",key:"svg-2"}]],yqe=wt("outline","target","Target",gqe),vqe=[["path",{d:"M4 8v-2a2 2 0 0 1 2 -2h2",key:"svg-0"}],["path",{d:"M4 16v2a2 2 0 0 0 2 2h2",key:"svg-1"}],["path",{d:"M16 4h2a2 2 0 0 1 2 2v2",key:"svg-2"}],["path",{d:"M16 20h2a2 2 0 0 0 2 -2v-2",key:"svg-3"}],["path",{d:"M8 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0",key:"svg-4"}],["path",{d:"M16 16l-2.5 -2.5",key:"svg-5"}]],bi=wt("outline","zoom-scan","ZoomScan",vqe),bqe=({node:e})=>y.jsxs(en,{className:hqe,gap:6,align:"baseline",wrap:"nowrap",children:[y.jsxs(at,{component:"div",fz:11,c:"dimmed",children:[e.kind,":"]}),y.jsx(at,{component:"div",fz:"sm",fw:"500",children:e.title})]}),xqe=({instance:e})=>{const r=Nt(),n=r.currentView.id,o=[...e.views()];return y.jsxs(en,{className:fqe,gap:4,children:[y.jsx(Ta,{color:"gray",variant:"transparent",size:"xs",flex:0,children:y.jsx(yqe,{stroke:1.2})}),y.jsx(at,{component:"div",fz:"sm",fw:"500",flex:"1 1 100%",children:e.title}),y.jsxs(Se,{onClick:nn,pos:"relative","data-no-transform":!0,flex:0,children:[o.length===0&&y.jsx(Vn,{size:"compact-xs",variant:"transparent",color:"gray",disabled:!0,children:"no views"}),o.length>0&&y.jsxs(tn,{shadow:"md",withinPortal:!1,position:"bottom-start",offset:0,closeOnClickOutside:!0,clickOutsideEvents:["pointerdown","mousedown","click"],closeOnEscape:!0,trapFocus:!0,children:[y.jsx(tn.Target,{children:y.jsxs(Vn,{size:"compact-xs",variant:"subtle",color:"gray",children:[o.length," view",o.length>1?
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
a ${a},${i} 0,0,0 ${-e} 0
2025-12-16 12:13:34 +01:00
l 0,${l}
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
a ${a},${i} 0,0,0 ${e} 0
2025-12-16 12:13:34 +01:00
l 0,${-l}
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
z
`.replace(/\s+/g," ").trim(),ry:i,rx:a}}function MJ(e,r,n=.185){const o=r,a=Math.round(o/2),i=Md(o/2*n),l=e-2*i;return{path:`
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
M ${i},0
a ${i},${a} 0,0,0 0 ${o}
2025-12-16 12:13:34 +01:00
l ${l},0
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
a ${i},${a} 0,0,0 0 ${-o}
z`.replace(/\s+/g," ").trim(),ry:a,rx:i}}const Rp={width:115,height:120,path:"M57.9197 0C10.9124 0 33.5766 54.75 33.5766 54.75C38.6131 62.25 45.3285 60.75 45.3285 66C45.3285 70.5 39.4526 72 33.5766 72.75C24.3431 72.75 15.9489 71.25 7.55474 84.75C2.51825 93 0 120 0 120H115C115 120 112.482 93 108.285 84.75C99.8905 70.5 91.4963 72.75 82.2628 72C76.3869 71.25 70.5109 69.75 70.5109 65.25C70.5109 60.75 77.2263 62.25 82.2628 54C82.2628 54.75 104.927 0 57.9197 0V0Z"};function NJ({shape:e,w:r,h:n}){switch(e){case"mobile":return y.jsxs(y.Fragment,{children:[y.jsx("rect",{width:r,height:n,rx:6,"data-likec4-fill":"mix-stroke",strokeWidth:0}),y.jsxs("g",{"data-likec4-fill":"fill",strokeWidth:0,children:[y.jsx("circle",{cx:17,cy:n/2,r:12}),y.jsx("rect",{x:33,y:12,width:r-44,height:n-24,rx:5})]})]});case"browser":return y.jsxs(y.Fragment,{children:[y.jsx("rect",{width:r,height:n,rx:6,"data-likec4-fill":"mix-stroke",strokeWidth:0}),y.jsxs("g",{"data-likec4-fill":"fill",strokeWidth:0,children:[y.jsx("circle",{cx:16,cy:17,r:7}),y.jsx("circle",{cx:36,cy:17,r:7}),y.jsx("circle",{cx:56,cy:17,r:7}),y.jsx("rect",{x:70,y:8,width:r-80,height:17,rx:4}),y.jsx("rect",{x:10,y:32,width:r-20,height:n-42,rx:4})]})]});case"person":return y.jsxs(y.Fragment,{children:[y.jsx("rect",{width:r,height:n,rx:6,strokeWidth:0}),y.jsx("svg",{x:r-Rp.width-6,y:n-Rp.height,width:Rp.width,height:Rp.height,viewBox:`0 0 ${Rp.width} ${Rp.height}`,"data-likec4-fill":"mix-stroke",children:y.jsx("path",{strokeWidth:0,d:Rp.path})})]});case"queue":{const{path:o,rx:a,ry:i}=MJ(r,n);return y.jsxs(y.Fragment,{children:[y.jsx("path",{d:o,strokeWidth:2}),y.jsx("ellipse",{cx:a,cy:i,ry:i-.75,rx:a,"data-likec4-fill":"mix-stroke",strokeWidth:2})]})}case"storage":case"cylinder":{const{path:o,rx:a,ry:i}=DJ(r,n);return y.jsxs(y.Fragment,{children:[y.jsx("path",{d:o,strokeWidth:2}),y.jsx("ellipse",{cx:a,cy:i,ry:i,rx:a-.75,"data-likec4-fill":"mix-stroke",strokeWidth:2})]})}default:return Qo(e)}}function JHe({shape:e,w:r,h:n}){let o;switch(e){case"queue":o=y.jsx("path",{d:MJ(r,n).path});break;case"storage":case"cylinder":{o=y.jsx("path",{d:DJ(r,n).path});break}default:{o=y.jsx("rect",{x:-3,y:-3,width:r+6,height:n+6,rx:8});break}}return y.jsx("g",{className:"likec4-shape-outline",children:o})}function eUe({multiple:e,withOutLine:r}){return y.jsxs("div",{className:GK({shapetype:"html"}),children:[e&&y.jsx("div",{className:"likec4-shape-multiple"}),r&&y.jsx("div",{className:"likec4-shape-outline"})]})}function pm({data:e,width:r,height:n,showSeletionOutline:o=!0}){let a=r&&r>10?r:e.width,i=n&&n>10?n:e.height;const l=e.style?.multiple??!1;if(e.shape==="rectangle")return y.jsx(eUe,{multiple:l,withOutLine:o});const s=GK({shapetype:"svg"});return y.jsxs(y.Fragment,{children:[l&&y.jsx("svg",{className:s,"data-likec4-shape-multiple":"true",viewBox:`0 0 ${a} ${i}`,children:y.jsx(NJ,{shape:e.shape,w:a,h:i})}),y.jsxs("svg",{className:s,viewBox:`0 0 ${a} ${i}`,children:[o&&y.jsx(JHe,{shape:e.shape,w:a,h:i}),y.jsx(NJ,{shape:e.shape,w:a,h:i})]})]})}const zp=S.forwardRef(({value:e,textScale:r=1,uselikec4palette:n=!1,hideIfEmpty:o=!1,emptyText:a="no content",className:i,style:l,fontSize:s,...c},d)=>{if(e.isEmpty&&o)return null;const u=e.nonEmpty?e.isMarkdown?{dangerouslySetInnerHTML:{__html:e.html}}:{children:y.jsx("p",{children:e.text})}:{children:y.jsx(at,{component:"span",fz:"xs",c:"dimmed",style:{userSelect:"none"},children:a})};return y.jsx(hr,{ref:d,...c,className:Ge(bVe({uselikec4palette:n,value:e.isMarkdown?"markdown":"plaintext"}),i),style:{...l,...s&&{"--text-fz":`var(--font-sizes-${s}, var(--font-sizes-md))`},...r!==1&&{"--mantine-scale":r}},...u})});zp.displayName="Markdown";const PJ=S.forwardRef(({className:e,...r},n)=>y.jsx("div",{...r,ref:n,className:Ge(e,yVe(),"likec4-element")})),BJ=({data:e,...r})=>y.jsx(bx,{element:e,...r}),IJ=S.forwardRef(({className:e,...r},n)=>y.jsx("div",{...r,className:Ge(e,"likec4-element-node-content"),ref:n})),OJ=S.forwardRef(({data:{title:e,style:r},className:n,...o},a)=>{const{size:i}=$b(r),l=i==="sm"||i==="xs";return y.jsx(at,{component:"div",...o,className:
${ve.message}`)}else throw new Error(`Invalid target: "${oe}" is not a valid target from the root node. Did you mean ".${oe}"?`)})}function Yo(J){const ee=L(J.config.target);return ee?{target:ee.map(oe=>typeof oe=="string"?xs(J.parent,oe):oe)}:J.parent.initial}function jo(J){return J.type==="history"}function ua(J){const ee=Dl(J);for(const oe of ee)for(const ie of Ye(oe,J))ee.add(ie);return ee}function Dl(J){const ee=new Set;function oe(ie){if(!ee.has(ie)){if(ee.add(ie),ie.type==="compound")oe(ie.initial.target[0]);else if(ie.type==="parallel")for(const le of ke(ie))oe(le)}}return oe(J),ee}function Ao(J,ee){if(Ht(ee))return J.machine.getStateNodeById(ee);if(!J.states)throw new Error(`Unable to retrieve child state '${ee}' from '${J.id}'; no child states exist.`);const oe=J.states[ee];if(!oe)throw new Error(`Child state '${ee}' does not exist on '${J.id}'`);return oe}function xs(J,ee){if(typeof ee=="string"&&Ht(ee))try{return J.machine.getStateNodeById(ee)}catch{}const oe=C(ee).slice();let ie=J;for(;oe.length;){const le=oe.shift();if(!le.length)break;ie=Ao(ie,le)}return ie}function ws(J,ee){if(typeof ee=="string"){const le=J.states[ee];if(!le)throw new Error(`State '${ee}' does not exist on '${J.id}'`);return[J,le]}const oe=Object.keys(ee),ie=oe.map(le=>Ao(J,le)).filter(Boolean);return[J.machine.root,J].concat(ie,oe.reduce((le,ve)=>{const De=Ao(J,ve);if(!De)return le;const Fe=ws(De,ee[ve]);return le.concat(Fe)},[]))}function zc(J,ee,oe,ie){const le=Ao(J,ee).next(oe,ie);return!le||!le.length?J.next(oe,ie):le}function Ml(J,ee,oe,ie){const le=Object.keys(ee),ve=Ao(J,le[0]),De=ks(ve,ee[le[0]],oe,ie);return!De||!De.length?J.next(oe,ie):De}function lh(J,ee,oe,ie){const le=[];for(const ve of Object.keys(ee)){const De=ee[ve];if(!De)continue;const Fe=Ao(J,ve),rt=ks(Fe,De,oe,ie);rt&&le.push(...rt)}return le.length?le:J.next(oe,ie)}function ks(J,ee,oe,ie){return typeof ee=="string"?zc(J,ee,oe,ie):Object.keys(ee).length===1?Ml(J,ee,oe,ie):lh(J,ee,oe,ie)}function tu(J){return Object.keys(J.states).map(ee=>J.states[ee]).filter(ee=>ee.type==="history")}function Xo(J,ee){let oe=J;for(;oe.parent&&oe.parent!==ee;)oe=oe.parent;return oe.parent===ee}function Tc(J,ee){const oe=new Set(J),ie=new Set(ee);for(const le of oe)if(ie.has(le))return!0;for(const le of ie)if(oe.has(le))return!0;return!1}function _s(J,ee,oe){const ie=new Set;for(const le of J){let ve=!1;const De=new Set;for(const Fe of ie)if(Tc(Nr([le],ee,oe),Nr([Fe],ee,oe)))if(Xo(le.source,Fe.source))De.add(Fe);else{ve=!0;break}if(!ve){for(const Fe of De)ie.delete(Fe);ie.add(le)}}return Array.from(ie)}function ru(J){const[ee,...oe]=J;for(const ie of Ye(ee,void 0))if(oe.every(le=>Xo(le,ie)))return ie}function Ss(J,ee){if(!J.target)return[];const oe=new Set;for(const ie of J.target)if(jo(ie))if(ee[ie.id])for(const le of ee[ie.id])oe.add(le);else for(const le of Ss(Yo(ie),ee))oe.add(le);else oe.add(ie);return[...oe]}function Zo(J,ee){const oe=Ss(J,ee);if(!oe)return;if(!J.reenter&&oe.every(le=>le===J.source||Xo(le,J.source)))return J.source;const ie=ru(oe.concat(J.source));if(ie)return ie;if(!J.reenter)return J.source.machine.root}function Nr(J,ee,oe){const ie=new Set;for(const le of J)if(le.target?.length){const ve=Zo(le,oe);le.reenter&&le.source===ve&&ie.add(ve);for(const De of ee)Xo(De,ve)&&ie.add(De)}return[...ie]}function Mn(J,ee){if(J.length!==ee.size)return!1;for(const oe of J)if(!ee.has(oe))return!1;return!0}function Do(J,ee,oe,ie,le,ve){if(!J.length)return ee;const De=new Set(ee._nodes);let Fe=ee.historyValue;const rt=_s(J,De,Fe);let lt=ee;le||([lt,Fe]=zi(lt,ie,oe,rt,De,Fe,ve,oe.actionExecutor)),lt=ho(lt,ie,oe,rt.flatMap(Ze=>Ze.actions),ve,void 0),lt=jc(lt,ie,oe,rt,De,ve,Fe,le);const Ot=[...De];lt.status==="done"&&(lt=ho(lt,ie,oe,Ot.sort((Ze,Ke)=>Ke.order-Ze.order).flatMap(Ze=>Ze.exit),ve,void 0));try{return Fe===ee.historyValue&&Mn(ee._nodes,De)?lt:Gr(lt,{_nodes:Ot,historyValue:Fe})}catch(Ze){throw Ze}}function Nl(J,ee,oe,ie,le){if(ie.output===void 0)return;const ve=p(le.id,le.output!==void 0&&le.parent?z(le.output,J.context,ee,oe.self):void 0);return z(ie.output,J.context,ve,oe
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
drop-shadow(0 2px 3px rgb(0 0 0 / 22%))
drop-shadow(0 1px 8px rgb(0 0 0 / 10%))
`});const aZe=fe({fontWeight:500,letterSpacing:"0.2px",paddingTop:"0",paddingBottom:"0",textTransform:"lowercase",transition:"all 150ms ease-in-out",cursor:"pointer","--badge-radius":"2px","--badge-fz":"9.5px","--badge-padding-x":"3px","--badge-height":"13.5px","--badge-lh":"1","--badge-bg":"var(--likec4-palette-fill)","--badge-color":"var(--likec4-palette-hiContrast)"}),iZe=[["path",{d:"M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0",key:"svg-0"}],["path",{d:"M12 16v.01",key:"svg-1"}],["path",{d:"M12 13a2 2 0 0 0 .914 -3.782a1.98 1.98 0 0 0 -2.414 .483",key:"svg-2"}]],lZe=wt("outline","help-circle","HelpCircle",iZe),sZe=[["path",{d:"M7 7l10 10",key:"svg-0"}],["path",{d:"M17 8l0 9l-9 0",key:"svg-1"}]],cZe=wt("outline","arrow-down-right","ArrowDownRight",sZe),dZe=({value:e})=>{const{title:r,color:n="primary",shape:o="rectangle"}=e,[a,i]=S.useState(null),l=Nt(),s=300,c=200;return y.jsx(b3,{shadow:"none",px:"xs",py:"sm",className:Ge(oZe),"data-likec4-color":n,onMouseEnter:()=>{i(null),l.highlightNotation(e)},onMouseLeave:()=>{i(null),l.unhighlightNotation()},children:y.jsxs(en,{gap:"sm",align:"stretch",wrap:"nowrap",children:[y.jsx(Se,{flex:"0 0 70px",style:{position:"relative",width:70,height:GCe(70*(c/s),0)},children:y.jsx(pm,{data:{shape:o,width:s,height:c}})}),y.jsxs(Lo,{gap:4,flex:1,children:[y.jsx(en,{gap:4,flex:"0 0 auto",children:e.kinds.map(d=>y.jsx(ec,{className:Ge(aZe),onMouseEnter:()=>{i(d),l.highlightNotation(e,d)},onMouseLeave:()=>{i(null),l.highlightNotation(e)},opacity:Bq(a)&&a!==d?.25:1,children:d},d))}),y.jsx(at,{component:"div",fz:"sm",fw:500,lh:"1.25",style:{textWrap:"pretty"},children:r})]})]})})},uZe=e=>({id:e.view.id,notations:e.view.notation?.nodes??[]}),pZe=S.memo(()=>{const e=QC(s=>s.height),{id:r,notations:n}=pi(uZe),[o,a]=sze({key:"notation-webview-collapsed",defaultValue:!0}),i=n.length>0,l=bm();return y.jsxs(Cn,{children:[!i&&y.jsx(mi.div,{initial:{opacity:.75,translateX:"50%"},animate:{opacity:1,translateX:0},exit:{translateX:"100%",opacity:.6},className:AR,children:y.jsx(_n,{label:"View has no notations",color:"orange",...l,children:y.jsx(Ta,{size:"lg",variant:"light",color:"orange",radius:"md",children:y.jsx(rte,{})})})},"empty"),i&&o&&y.jsx(mi.div,{initial:{opacity:.75,translateX:"50%"},animate:{opacity:1,translateX:0},exit:{translateX:"100%",opacity:.6},className:AR,children:y.jsx(_n,{label:"Show notation",color:"dark",fz:"xs",...l,children:y.jsx(lr,{size:"lg",variant:"default",color:"gray",className:tZe,onClick:()=>a(!1),children:y.jsx(lZe,{stroke:1.5})})})},"collapsed"),i&&!o&&y.jsx(mi.div,{initial:{opacity:.75,scale:.2},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.25},className:Ge("react-flow__panel",AR),style:{transformOrigin:"bottom right"},children:y.jsx(Af,{radius:"sm",withBorder:!0,shadow:"lg",className:rZe,children:y.jsxs(up,{defaultValue:"first",radius:"xs",children:[y.jsxs(ky,{children:[y.jsx(lr,{size:"md",variant:"subtle",color:"gray",ml:2,style:{alignSelf:"center"},onClick:()=>a(!0),children:y.jsx(cZe,{stroke:2})}),y.jsx(Lf,{value:"first",fz:"xs",children:"Elements"}),y.jsx(Lf,{value:"second",fz:"xs",disabled:!0,children:"Relationships"})]}),y.jsx(rc,{value:"first",className:nZe,hidden:o,children:y.jsx(oa,{viewportProps:{style:{maxHeight:`min(40vh, ${Math.max(e-60,50)}px)`}},children:y.jsx(Lo,{gap:0,children:n.map((s,c)=>y.jsx(dZe,{value:s},c))})})})]})})},r)]})}),hZe=S.memo(()=>{const[{layout:e,isActive:r},{toggleCompare:n}]=TR(),o=e==="manual"?"var(--mantine-color-orange-6)":"var(--mantine-color-green-6)";return y.jsx(hr,{className:qn({position:"absolute",top:"0",left:"0",width:"full",height:"full",border:"default",borderWidth:4,pointerEvents:"none",alignItems:"flex-start",justifyContent:"center"}),style:{zIndex:"9999",display:r?void 0:"none",borderColor:o},children:y.jsx(fZe,{style:{backgroundColor:o},onClick:a=>{a.stopPropagation(),n()},children:"Close compare"})})}),fZe=pr.withProps({className:fe({fontSize:"xs",fontWeight:"medium",py:"1.5",lineHeight:"1",borderBottomLeftRadius:"sm",borderBottomRightRadius:"sm",transform:"translateY(-4px)",px:"4",color:"mantine.colors.gray[
2025-12-16 12:13:34 +01:00
${l} {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
--likec4-palette-fill: ${i(n.elements.fill)};
--likec4-palette-stroke: ${i(n.elements.stroke)};
}
${Nre} ${l} {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
--likec4-palette-fill: ${a(n.elements.fill)};
--likec4-palette-stroke: ${a(n.elements.stroke)};
}
`.trim()};function FQe(e,r,n){const{elements:o,relationships:a}=n,i=`:where(${e} [data-likec4-color=${r}])`;return[`
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
${i} {
--likec4-palette-fill: ${o.fill};
--likec4-palette-stroke: ${o.stroke};
--likec4-palette-hiContrast: ${o.hiContrast};
--likec4-palette-loContrast: ${o.loContrast};
--likec4-palette-relation-stroke: ${a.line};
--likec4-palette-relation-label: ${a.label};
--likec4-palette-relation-label-bg: ${a.labelBg};
--likec4-palette-relation-stroke-selected: ${Are(Dre(a.line,"black",85))};
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
}
${Nre} ${i} {
--likec4-palette-relation-stroke-selected: ${Are(Dre(a.line,"white",70))};
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
}
`.trim(),...V$e(1,OQe+1).map(l=>LQe(e,r,n,l))].join(`
`)}function VQe(e,r){return Jr(r.colors,uw(),un(([n,o])=>FQe(e,n,o)),Lq(`
`))}const qQe=S.memo(({id:e})=>{const r=`#${e}`,n=np()?.(),{theme:o}=Tte(),a=VQe(r,o);return y.jsx("style",{type:"text/css","data-likec4-colors":e,dangerouslySetInnerHTML:{__html:a},nonce:n})}),HQe='@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:400;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-400-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-400-normal.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:500;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-500-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-500-normal.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:600;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-600-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-600-normal.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:400;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-400-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-400-normal.woff) format("woff");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:500;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-500-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-500-normal.woff) format("woff");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:600;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-600-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-600-normal.woff) format("woff");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:400;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-ext-400-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-ext-400-normal.woff) format("woff");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:500;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-ext-500-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-ext-500-normal.woff) format("woff");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:600;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-ext-600-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-ext-600-normal.woff) format("woff");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:400;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@la
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)},lJe=function(e,r){return nJe(e)||oJe(e,r)||aJe(e,r)||iJe()},Yre=Wre((function(e){function r(){return e.exports=r=Object.assign||function(n){for(var o=1;o<arguments.length;o++){var a=arguments[o];for(var i in a)Object.prototype.hasOwnProperty.call(a,i)&&(n[i]=a[i])}return n},r.apply(this,arguments)}e.exports=r})),sJe=function(e,r){if(e==null)return{};var n,o,a={},i=Object.keys(e);for(o=0;o<i.length;o++)n=i[o],r.indexOf(n)>=0||(a[n]=e[n]);return a},Xre=function(e,r){if(e==null)return{};var n,o,a=sJe(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)n=i[o],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a},cJe=S.createContext(null);function Zre(e){var r=e.children,n=r===void 0?"":r,o=Xre(e,["children"]);return typeof n!="string"&&(n=ZQe()),Kr.createElement("template",Yre({},o,{dangerouslySetInnerHTML:{__html:n}}))}function Kre(e){var r=e.root,n=e.children;return Vi.createPortal(n===void 0?null:n,r)}function dJe(e){var r=S.forwardRef((function(n,o){var a,i,l=n.mode,s=l===void 0?"open":l,c=n.delegatesFocus,d=c!==void 0&&c,u=n.styleSheets,p=u===void 0?[]:u,f=n.ssr,g=f!==void 0&&f,v=n.children,w=Xre(n,["mode","delegatesFocus","styleSheets","ssr","children"]),x=(i=S.useRef((a=o)&&a.current),S.useEffect((function(){a&&(a.current=i.current)}),[a]),i),k=S.useState(null),C=lJe(k,2),_=C[0],$=C[1],R="node_".concat(s).concat(d);return S.useLayoutEffect((function(){if(x.current)try{if(typeof o=="function"&&o(x.current),g){var T=x.current.shadowRoot;return void $(T)}var A=x.current.attachShadow({mode:s,delegatesFocus:d});p.length>0&&(A.adoptedStyleSheets=p),$(A)}catch(z){(function(j){var I=j.error,P=j.styleSheets,L=j.root;switch(I.name){case"NotSupportedError":P.length>0&&(L.adoptedStyleSheets=P);break;default:throw I}})({error:z,styleSheets:p,root:_})}}),[o,x,p]),Kr.createElement(Kr.Fragment,null,Kr.createElement(e.tag,Yre({key:R,ref:x},w),(_||g)&&Kr.createElement(cJe.Provider,{value:_},g?Kr.createElement(Zre,{shadowroot:s,shadowrootmode:s},e.render({root:_,ssr:g,children:v})):Kr.createElement(Kre,{root:_},e.render({root:_,ssr:g,children:v})))))}));return r.propTypes={mode:ml.oneOf(["open","closed"]),delegatesFocus:ml.bool,styleSheets:ml.arrayOf(ml.instanceOf(globalThis.CSSStyleSheet)),ssr:ml.bool,children:ml.node},r}Zre.propTypes={children:ml.oneOfType([ml.string,ml.node])},Kre.propTypes={root:ml.object.isRequired,children:ml.node};var Ez=new Map;function uJe(){var e=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},r=arguments.length>1&&arguments[1]!==void 0?arguments[1]:"core",n=arguments.length>2&&arguments[2]!==void 0?arguments[2]:function(o){return o.children};return new Proxy(e,{get:function(o,a){var i=rJe(a,{separator:"-"}),l="".concat(r,"-").concat(i);return Ez.has(l)||Ez.set(l,dJe({tag:i,render:n})),Ez.get(l)}})}var pJe=uJe();const hJe=pJe.div;function fJe(e,r=!1){if(r===!1)return`
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
:where([data-likec4-instance="${e}"]) {
display: block;
box-sizing: border-box;
border: 0 solid transparent;
background: transparent;
padding: 0;
margin: 0;
overflow: hidden;
width: 100%;
height: 100%;
min-width: 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 Qre=S.forwardRef(({children:e,theme:r=Bre,injectFontCss:n=!0,styleNonce:o,colorScheme:a,keepAspectRatio:i=!1,...l},s)=>{const c=WQe(a),d=DG(),u=fJe(d,i),p=S.useRef(null),f=UQe(n,o),g=S.useCallback(()=>p.current??void 0,[p]),v=it(()=>{if(ri(o)){if(typeof o=="string")return o;if(typeof o=="function")return o()}return""});let w=ri(o)?v():void 0;return y.jsxs(y.Fragment,{children:[y.jsx("style",{type:"text/css",nonce:w,dangerouslySetInnerHTML:{__html:u}}),y.jsx(hJe,{ssr:!1,...l,styleSheets:f,"data-likec4-instance":d,children:y.jsx("div",{ref:$r(p,s),"data-mantine-color-scheme":c,className:"likec4-shadow-root",children:y.jsx(z9,{...a&&{forceColorScheme:a},defaultColorScheme:c,getRootElement:g,...!!w&&{getStyleNonce:v},cssVariablesSelector:".likec4-shadow-root",theme:r,children:y.jsx(wz,{children:e})})})})]})});Qre.displayName="ShadowRoot";const mJe=fe({cursor:"pointer","--mantine-cursor-pointer":"pointer","& :where(.likec4-diagram, .likec4-compound-node, .likec4-element-node)":{cursor:"pointer"}});function gJe({viewId:e,className:r,pannable:n=!1,zoomable:o=!1,keepAspectRatio:a=!0,colorScheme:i,injectFontCss:l=!0,controls:s=!1,background:c="transparent",browser:d=!0,showNavigationButtons:u=!1,enableNotations:p,enableFocusMode:f=!1,enableDynamicViewWalkthrough:g=!1,enableElementDetails:v=!1,enableRelationshipDetails:w=!1,enableRelationshipBrowser:x=w,reduceGraphics:k="auto",mantineTheme:C,styleNonce:_,style:$,reactFlowProps:R,renderNodes:T,children:A,...z}){const j=S.useRef(null),I=gNe(),[P,L]=S.useState("manual"),[H,M]=S.useState(null),V=it(Q=>{Q&&Q!==H&&L("manual"),M(Q)}),B=it(()=>{V(e)});if(!I)return y.jsx(kz,{children:"LikeC4Model not found. Make sure you provided LikeC4ModelProvider."});const F=I.findView(e)?.$layouted;if(!F)return y.jsx(XQe,{viewId:e});if(F._stage!=="layouted")return y.jsxs(kz,{children:['LikeC4 View "$',e,'" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.']});const q=H?I.findView(H):null,G=P==="manual"?q?.$layouted:q?.$view,U=!!p&&(F.notation?.nodes?.length??0)>0,Y=(G?.notation?.nodes?.length??0)>0,Z=d!==!1,O=Pq(d)?{}:d,W=kee(F,z.dynamicViewVariant),K=j.current?{root:j.current}:void 0;return y.jsx(Qre,{ref:j,injectFontCss:l,theme:C,colorScheme:i,styleNonce:_,keepAspectRatio:a?W:!1,className:Ge("likec4-view",r),style:$,children:y.jsxs(wz,{children:[y.jsx(Lre,{view:F,pannable:n,zoomable:o,background:c,fitView:!0,fitViewPadding:y2.default,enableNotations:U,enableDynamicViewWalkthrough:g,showNavigationButtons:u,enableCompareWithLatest:!1,enableFocusMode:f,enableRelationshipDetails:w,enableElementDetails:v,enableRelationshipBrowser:x,enableElementTags:!1,controls:s,reduceGraphics:k,className:Ge("likec4-static-view",Z&&mJe),enableSearch:!1,...Z&&{onCanvasClick:B,onNodeClick:B},reactFlowProps:R,renderNodes:T,children:A,...z}),y.jsx(Cn,{...K,children:G&&y.jsxs(p0,{openDelay:0,onClose:()=>V(null),children:[y.jsx(Lre,{view:G,pannable:!0,zoomable:!0,background:"dots",onNavigateTo:V,showNavigationButtons:!0,enableDynamicViewWalkthrough:!0,enableFocusMode:!0,enableRelationshipBrowser:!0,enableElementDetails:!0,enableRelationshipDetails:!0,enableSearch:!0,enableElementTags:!0,enableCompareWithLatest:!0,controls:!0,fitView:!0,...z,fitViewPadding:y2.withControls,...O,enableNotations:Y&&(O.enableNotations??!0),renderNodes:T,onLayoutTypeChange:L}),y.jsx(hr,{pos:"absolute",top:"4",right:"4",zIndex:"999",children:y.jsx(lr,{variant:"default",color:"gray",onClick:Q=>{Q.stopPropagation(),V(null)},children:y.jsx(fp,{})})})]})})]})})}var yJe=e=>y.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMidYMid",viewBox:"0 0 512 131",...e,children:y.jsx("path",{fill:"#2396ED",d:"m140.598 25.715 3.892 2.818c6.77 5.46 10.662 11.625 11.508 18.67 7.277-1.409 16.584-.352 20.646 2.466l3.723 2.29-.677 1.41c-1.185 2.641-1.523 3.346-1.692 3.698-6.6 13.21-19.631 13.386-25.723 13.21-15.4 38.573-48.23 59.885-92.57 59.885-20.476 0-36.045-6.517-46.538-19.375C-.709 93.88-.709 71.862.475 64.817l.339-1.41h122.353c6.43 0 11.339-1.76 13.708-3.17-2.539-3.875-3.385-8.278-3.554-10.744-.508-7.045
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
addressing a growing number of use cases. It centrally stores your data so you can
discover the expected and uncover the unexpected.`},title:"Elasticsearch",kind:"container",id:"elasticsearch"},objectstorage:{style:{opacity:20},technology:"S3 Object Storage",description:{txt:"s3 Object Storage"},title:"s3 Object Storage",kind:"container",id:"objectstorage"},postgres:{style:{opacity:20,icon:"tech:postgresql"},technology:"PostgreSQL",description:{txt:`PostgreSQL is a powerful, open source object-relational database system.
It has more than 15 years of active development and a proven architecture
that has earned it a strong reputation for reliability, data integrity,
and correctness.`},title:"PostgreSQL",kind:"container",id:"postgres"},redis:{style:{opacity:20,icon:"tech:redis"},technology:"Redis",description:{txt:"Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker."},title:"Redis",kind:"container",id:"redis"},developer:{style:{shape:"person",color:"green"},description:{txt:"The regular user of the platform"},title:"Developer",kind:"actor",id:"developer"},platformdeveloper:{style:{shape:"person",color:"gray"},description:{txt:"The EDP engineer"},title:"Platform Developer",kind:"actor",id:"platformdeveloper"},otherProductLifecycleRoles:{style:{shape:"person",color:"green"},description:{txt:"Coworking roles in the outer loop"},title:"Reviewer, Tester, Auditors, Operators",kind:"actor",id:"otherProductLifecycleRoles"},customers:{style:{shape:"person",color:"amber"},description:{txt:"Consumers of your Application"},title:"End Customers",kind:"actor",id:"customers"},cloud:{style:{},technology:"IaaS/PaaS",description:{txt:"Cloud environments"},title:"Cloud",kind:"system",id:"cloud"},enterprise:{style:{},description:{txt:"The customers' enterprise systems"},title:"Customers' Enterprise Systems",kind:"system",id:"enterprise"},documentation:{style:{icon:"tech:electron"},technology:"Static Site Generator",description:{txt:"Documentation system for EDP LikeC4 platform."},title:"Documentation",kind:"system",id:"documentation"},edf:{style:{icon:"tech:kubernetes"},technology:"Kubernetes",description:{txt:"EDP Foundry is a platform for building and deploying EDPs tenantwise."},title:"EDF",kind:"system",id:"edf"},edp:{style:{icon:"tech:kubernetes"},technology:"Kubernetes",description:{txt:"EDP Edge Development Platform"},title:"EDP",kind:"system",id:"edp"},localbox:{style:{},technology:"Linux/Windows/Mac",description:{txt:"A local development system"},title:"localbox",kind:"system",id:"localbox"},"edfbuilder_workflow.runEDP":{style:{opacity:25},title:"Run edpbuilder script",kind:"step",id:"edfbuilder_workflow.runEDP"},"edfbuilder_workflow.applyEDFBuilder":{style:{opacity:15},title:"Applies EDFbuilder resource (and triggers creation)",kind:"step",id:"edfbuilder_workflow.applyEDFBuilder"},"applicationspecification.application_gitrepo":{style:{icon:"tech:git"},technology:"Git",description:{txt:"Git Application Repository"},title:"Git App Repo",kind:"component",id:"applicationspecification.application_gitrepo"},"applicationspecification.applicationspec_gitrepo":{style:{icon:"tech:git"},technology:"Git",description:{txt:"Git Application Specification Repository"},title:"Git AppSpec Repo",kind:"component",id:"applicationspecification.applicationspec_gitrepo"},"edp.api":{style:{opacity:20,icon:"tech:swagger"},description:{txt:"API for the EDP platform"},title:"API",kind:"container",id:"edp.api"},"edp.argoCD":{style:{opacity:20},description:{txt:"GitOps Service"},title:"ArgoCD",kind:"container",id:"edp.argoCD"},"edp.ui":{style:{opacity:20},description:{txt:"Developer Portal"},title:"Backstage",kind:"container",id:"edp.ui"},"edp.crossplane":{style:{opacity:20},tags:["internal"],description:{txt:"Declarative management of ressources"},title:"Crossplane",kind:"container",id:"edp.crossplane"},"edgeConnect.api":{style:{opacity:20},description:{txt:"Single entry point for provisioning and lifecycle management"},title:"Edge Cloud API",kind:"container",id:"edgeConnect.api"},"edgeConnect.resources":{style:{opacity:20},description:{txt:"Managed resources such as App, AppInstance, etc."},title:"Edge Resources",kind:"container",id:"edgeConnect.resources"},"edgeConnect.controllers":{style:{opacity:20},description:{txt:"Reconciles desired state and drives deployments"},title:"Controllers / Scheduler",kind:"container",id:"edgeConnect.controllers"},"edgeConnect.runtime":{style:{opacity:20},description:{txt:"Runtime where applications actually run"},title:"Edge Clusters",kind:"container",id:"edgeConnect.runtime"},"edp.externalSecrets":{style:{opacity:20},tags:["internal"],description:{txt:"Provider to access externally stored Kubernetes secrets"},title:"exte
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
offering capabilities like
code version controling
collaboration and ticketing
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",tags:[],style:{opacity:15,size:"md"},depth:1,x:10434,y:444,width:384,height:265,labelBBox:{x:6,y:0,width:92,height:15}},{id:"local.velero",parent:"local",level:1,children:["local.velero.velero"],inEdges:[],outEdges:["3znaik"],deploymentRef:"local.velero",title:"velero",kind:"namespace",color:"primary",shape:"rectangle",modelRef:"edp.velero.velero",tags:[],style:{opacity:15,size:"md"},depth:1,x:12058,y:444,width:384,height:265,labelBBox:{x:6,y:0,width:49,height:15}},{id:"edgeSdk",parent:null,level:0,children:[],inEdges:["1xqlhup"],outEdges:["14pfq5a","lw6otg"],deploymentRef:"edgeSdk",title:"Edge Cloud SDK",kind:"paas",technology:"Cloud Services",color:"primary",shape:"rectangle",icon:"tech:go",description:{txt:"Wrapper around API"},tags:[],style:{opacity:15,size:"md"},x:731,y:497,width:320,height:180,labelBBox:{x:68,y:54,width:214,height:67}},{id:"otc-edpFoundry.forgejoRunnerInfrastructure",parent:"otc-edpFoundry",level:1,children:[],inEdges:["l1c2z3"],outEdges:["109g3jm","1lrp92n"],deploymentRef:"otc-edpFoundry.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"primary",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},technology:null,x:4055,y:150,width:342,height:180,labelBBox:{x:18,y:54,width:306,height:66}},{id:"otcTenantProd.otcTenantEdpBuildthing",parent:"otcTenantProd",level:1,children:[],inEdges:[],outEdges:["rj56uy","u7ohgi","1ypat9q","1oiku86"],deploymentRef:"otcTenantProd.otcTenantEdpBuildthing",title:"edp.builth.ing",kind:"cluster",color:"primary",shape:"rectangle",icon:"tech:git",description:{txt:"Primary Instance"},tags:[],style:{opacity:15,size:"md"},x:18022,y:150,width:320,height:180,labelBBox:{x:85,y:63,width:181,height:48}},{id:"local.crossplane",parent:"local",level:1,children:["local.crossplane.crossplane","local.crossplane.crossplaneFunction","local.crossplane.crossplaneRbacManager","local.crossplane.providerArgoCD","local.crossplane.providerKind","local.crossplane.providerShell"],inEdges:[],outEdges:[],deploymentRef:"local.crossplane",title:"crossplane-system",kind:"namespace",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:12982,y:79,width:2670,height:301,labelBBox:{x:6,y:0,width:129,height:15}},{id:"local.crossplane.crossplane",parent:"local.crossplane",level:2,children:[],inEdges:[],outEdges:[],k
2025-12-18 09:21:05 +01:00
This is kubernetes clusters and other infrastructure like nodes and vms, and platform services. All is set up by IaC-pipelines in the Foundry.`},tags:[],style:{opacity:15,size:"md"},depth:1,x:2913,y:79,width:442,height:1704,labelBBox:{x:6,y:0,width:181,height:15}},{id:"local.backstage.database",parent:"local.backstage",level:2,children:[],inEdges:["19kg5y"],outEdges:[],kind:"instance",title:"Database",technology:"Postgresql",tags:[],icon:"tech:postgresql",color:"primary",shape:"storage",style:{opacity:15,size:"md"},deploymentRef:"local.backstage.database",modelRef:"edp.ui.database",x:8448,y:1177,width:320,height:180,labelBBox:{x:101,y:64,width:148,height:46}},{id:"local.argocd.argocdRedis",parent:"local.argocd",level:2,children:[],inEdges:["1gfgfhk","qfu5xm","g7xnzs","fon3rk"],outEdges:[],kind:"instance",title:"Redis",technology:"Redis",tags:[],icon:"tech:redis",color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.argocd.argocdRedis",modelRef:"edp.argoCD.argocdRedis",x:10043,y:1177,width:320,height:180,labelBBox:{x:119,y:64,width:113,height:46}},{id:"local.keycloak.keycloakDB",parent:"local.keycloak",level:2,children:[],inEdges:["4zwy1m"],outEdges:[],kind:"instance",title:"Database",technology:"Postgresql",tags:[],icon:"tech:postgresql",color:"primary",shape:"storage",style:{opacity:15,size:"md"},deploymentRef:"local.keycloak.keycloakDB",modelRef:"edp.keycloak.keycloakDB",x:10738,y:1177,width:320,height:180,labelBBox:{x:101,y:64,width:148,height:46}},{id:"local.monitoring.distributor",parent:"local.monitoring",level:2,children:[],inEdges:["sb2j38"],outEdges:[],kind:"instance",title:"Distributor",tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.monitoring.distributor",modelRef:"edp.monitoring.loki.distributor",x:7528,y:1177,width:320,height:180,labelBBox:{x:112,y:74,width:95,height:24}},{id:"otc-edp-per-tenant.forgejoRunnerInfrastructure",parent:"otc-edp-per-tenant",level:1,children:[],inEdges:["126mt75"],outEdges:["fkkf8y","1mbuxdd"],deploymentRef:"otc-edp-per-tenant.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"primary",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},technology:null,x:2963,y:150,width:342,height:180,labelBBox:{x:18,y:54,width:306,height:66}},{id:"otc-edp-per-tenant.cce",parent:"otc-edp-per-tenant",level:1,children:[],inEdges:["fkkf8y","r3wxut","1sng0q0","p2umm7"],outEdges:["pit45i","b27cdb"],deploymentRef:"otc-edp-per-tenant.cce",title:"OTC CCE",kind:"kubernetes",technology:"Kubernetes",color:"primary",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"OTC Container Cluster Engine"},tags:[],style:{opacity:15,size:"md"},x:2977,y:1177,width:327,height:180,labelBBox:{x:46,y:53,width:266,height:68}},{id:"otc-edp-per-tenant.cloudServices",parent:"otc-edp-per-tenant",level:1,children:[],inEdges:["pit45i","e3benz"],outEdges:[],deploymentRef:"otc-edp-per-tenant.cloudServices",title:"EDP Cloud Services",kind:"paas",technology:"Cloud Services",color:"primary",shape:"rectangle",description:{txt:"EDP Cloud Services"},tags:[],style:{opacity:15,size:"md"},x:2963,y:1553,width:320,height:180,labelBBox:{x:67,y:53,width:185,height:67}},{id:"otcKubernetes",parent:null,level:0,children:["otcKubernetes.edpCluster"],inEdges:["1ogkmfn","b27cdb","1mbuxdd","9r557q","rivecr","1lrp92n","se5brg"],outEdges:["i6v3n","p2umm7","126mt75","c2grk6","1ean8sr","l1c2z3","1m1lj8s"],deploymentRef:"otcKubernetes",title:"OTC Kubernetes",kind:"environment",technology:"Kubernetes",color:"primary",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"OTC Container Cluster Engine hosting EDP platform"},tags:[],style:{opacity:15,size:"md"},depth:1,x:4224,y:1500,width:384,height:265,labelBBox:{x:6,y:0,width:106,height:15}},{id:"otcKubernetes.edpCluster",parent:"otcKubernetes",level:1,children:[],inEdges:["1ogkmfn","b27cdb","1mbuxdd","9r557q","rivecr","1lrp92n","se5brg"],outEdges:["i6v3n","p2umm7
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
offering capabilities like
code version controling
collaboration and ticketing
and security scanning`},technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"local.gitea.forgejo",modelRef:"edp.forgejo",navigateTo:"forgejo",x:12542,y:844,width:340,height:180,labelBBox:{x:46,y:18,width:278,height:139}},{id:"local.gitea.forgejoRunner",parent:"local.gitea",level:2,children:[],inEdges:["1m1lj8s"],outEdges:["se5brg"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.gitea.forgejoRunner",modelRef:"forgejoRunner",x:12542,y:150,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:102}},{id:"local.spark.sparkoperator",parent:"local",level:1,children:[],inEdges:[],outEdges:[],kind:"instance",title:"Spark Operator",technology:"Spark",tags:[],icon:"tech:spark",color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"local.spark.sparkoperator",modelRef:"edp.spark.sparkoperator",x:17102,y:150,width:320,height:180,labelBBox:{x:76,y:65,width:198,height:45}}],edges:[{id:"1xqlhup",source:"edgeProvider",target:"edgeSdk",label:"built using",points:[[1035,330],[1021,352],[1007,374],[995,395],[977,425],[959,458],[943,489]],labelBBox:{x:996,y:395,width:67,height:18},parent:null,relations:["1wlvsb5"],color:"gray",line:"dashed",head:"normal"},{id:"u9omtf",source:"edgeProvider",target:"edgeProviderHost.edp",label:"hosted on",points:[[1264,255],[1378,274],[1522,320],[1596,426],[1673,536],[1652,606],[1596,727],[1576,770],[1543,808],[1507,838]],labelBBox:{x:1647,y:576,width:66,height:18},parent:null,relations:["12ssq9"],color:"gray",line:"dashed",head:"normal"},{id:"r4j4sg",source:"edgeProvider",target:"edgeProviderHost.terralist",label:"published to",points:[[1160,330],[1197,379],[1244,439],[1282,489]],labelBBox:{x:1225,y:395,width:80,height:18},parent:null,relations:["1mpjz5d"],color:"gray",line:"dashed",head:"normal"},{id:"14pfq5a",source:"edgeSdk",target:"edgeProviderHost.edp",label:"hosted on",points:[[1011,677],[1077,727],[1160,788],[1228,838]],labelBBox:{x:1125,y:742,width:66,height:18},parent:null,relations:["1sm6ifh"],color:"gray",line:"dashed",head:"normal"},{id:"lw6otg",source:"edgeSdk",target:"edgeCloud.edgeApi",label:"calls",points:[[884,677],[880,725],[875,785],[871,834]],labelBBox:{x:879,y:742,width:32,height:18},parent:null,relations:["vfhcba"],color:"gray",line:"dashed",head:"normal"},{id:"1ogkmfn",source:"edgeConnectEnv",target:"otcKubernetes.edpCluster",label:"[...]",points:[[5676,330],[5725,397],[5779,491],[5779,586],[5779,586],[5779,586],[5779,1268],[5779,1420],[5657,1426],[5518,1488],[5355,1561],[4853,1609],[4586,1630]],labelBBox:{x:5780,y:922,width:25,height:18},parent:null,relations:["18dtot7","1k6h7jf","1t1b56a"],color:"gray",line:"dashed",head:"normal"},{id:"i6v3n",source:"otcKubernetes.edpCluster",target:"edgeConnectEnv",label:"runs workflows",points:[[4576,1629],[4742,1611],[5004,1565],[5205,1457],[5317,1397],[5420,1395],[5420,1268],[5420,586],[5420,586],[5420,586],[5420,495],[5470,404],[5517,338]],labelBBox:{x:5421,y:923,width:97,height:18},parent:null,relations:["1pbc22f"],color:"gray",line:"dashed",head:"normal"},{id:"pit45i",source:"otc-edp-per-tenant.cce",target:"otc-edp-per-tenant.cloudServices",label:null,points:[[3134,1357],[3132,1391],[3130,1430],[3128,1465],[3127,1490],[3126,1518],[3125,1543]],labelBBox:null,parent:"otc-edp-per-tenant",relations:["1fzhjm9","15njmlz","hks76r","1w18ve8"],color:"gray",line:"dashed",head:"normal"},{id:"b27cdb",source:"otc-edp-per-tenant.cce",target:"otcKubernetes.edpCluster",label:"register",points:[[3155,1357],[3167,1404],[3190,1457],[3232,1488],[3246,1498],[3370,1498],[3387,1500],[3691,1532],[4043,1584],[4246,1615]],labelBBox:{x:3233,y:1465,width:51,height:18},parent:null,relations:["18dtot7"],color:"gray",line:"dashed",head:"normal"},{id:"fkkf8y",source:"otc-edp-per-tenant.forgejoRunnerInfrastructure",target:"otc-edp-per-tenant.cc
2025-12-16 12:13:34 +01:00
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
This is kubernetes clusters and other infrastructure like nodes and vms, and platform services. All is set up by IaC-pipelines in the Foundry.`},tags:[],style:{opacity:15,size:"md"},depth:3,x:8,y:8,width:1994,height:1159,labelBBox:{x:6,y:0,width:181,height:15}},{id:"otc-edp-per-tenant.forgejoRunnerInfrastructure",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner"],inEdges:[],outEdges:["1dcszi5"],deploymentRef:"otc-edp-per-tenant.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"primary",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},depth:1,x:321,y:150,width:384,height:266,labelBBox:{x:6,y:0,width:235,height:15}},{id:"otc-edp-per-tenant.cce",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.cce.edp"],inEdges:["1dcszi5"],outEdges:["8msu1q","120qe5o","ealiax","1trj5u6"],deploymentRef:"otc-edp-per-tenant.cce",title:"OTC CCE",kind:"kubernetes",technology:"Kubernetes",color:"red",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"OTC Container Cluster Engine"},tags:[],style:{opacity:15,size:"md"},depth:2,x:755,y:79,width:954,height:719,labelBBox:{x:6,y:0,width:54,height:15}},{id:"otc-edp-per-tenant.cce.edp",parent:"otc-edp-per-tenant.cce",level:2,children:["otc-edp-per-tenant.cce.edp.externalSecrets","otc-edp-per-tenant.cce.edp.ingressNginx","otc-edp-per-tenant.cce.edp.argoCD","otc-edp-per-tenant.cce.edp.forgejo"],inEdges:["1dcszi5"],outEdges:["8msu1q","120qe5o","ealiax","1trj5u6"],deploymentRef:"otc-edp-per-tenant.cce.edp",title:"EDP",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:787,y:132,width:890,height:634,labelBBox:{x:6,y:0,width:27,height:15}},{id:"otc-edp-per-tenant.cce.edp.externalSecrets",parent:"otc-edp-per-tenant.cce.edp",level:3,children:[],inEdges:[],outEdges:[],kind:"instance",title:"external-secrets",description:{txt:"Provider to access externally stored Kubernetes secrets"},tags:["internal"],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.externalSecrets",modelRef:"edp.externalSecrets",navigateTo:"externalSecrets",x:837,y:204,width:320,height:180,labelBBox:{x:39,y:54,width:242,height:65}},{id:"otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner",parent:"otc-edp-per-tenant.forgejoRunnerInfrastructure",level:2,children:[],inEdges:[],outEdges:["1dcszi5"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:353,y:204,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edp-per-tenant.cce.edp.ingressNginx",parent:"otc-edp-per-tenant.cce.edp",level:3,children:[],inEdges:[],outEdges:["1ir70dd","1kr1wg1"],kind:"instance",title:"Ingress",description:{txt:"Ingress Controller for incoming http(s) traffic"},tags:["internal"],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.ingressNginx",modelRef:"edp.ingressNginx",navigateTo:"ingressNginx",x:1287,y:204,width:320,height:180,labelBBox:{x:33,y:54,width:255,height:65}},{id:"otc-edp-per-tenant.cce.edp.argoCD",parent:"otc-edp-per-tenant.cce.edp",level:3,children:[],inEdges:["1ir70dd"],outEdges:[],kind:"instance",title:"ArgoCD",description:{txt:"GitOps Service"},tags:[],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.argoCD",modelRef:"edp.argoCD",navigateTo:"argoCD",x:1307,y:536,width:320,height:180,labelBBox:{x:108,y:63,width:105,height:48}},{id:"otc-edp-per-tenant.cce.edp.forgejo",parent:"otc-edp-per-tenant.cce.edp",level:3,children:[],inEdges:["1kr1wg1","1dcszi5"],outE
offering capabilities like
code version controling
collaboration and ticketing
and security scanning`},technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.forgejo",modelRef:"edp.forgejo",navigateTo:"forgejo",x:837,y:536,width:340,height:180,labelBBox:{x:46,y:18,width:278,height:139}},{id:"otc-edp-per-tenant.cloudServices",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.cloudServices.postgres","otc-edp-per-tenant.cloudServices.redis","otc-edp-per-tenant.cloudServices.objectstorage","otc-edp-per-tenant.cloudServices.elasticsearch"],inEdges:["8msu1q","120qe5o","ealiax","1trj5u6"],outEdges:[],deploymentRef:"otc-edp-per-tenant.cloudServices",title:"EDP Cloud Services",kind:"paas",technology:"Cloud Services",color:"primary",shape:"rectangle",description:{txt:"EDP Cloud Services"},tags:[],style:{opacity:15,size:"md"},depth:1,x:58,y:815,width:1894,height:302,labelBBox:{x:6,y:0,width:127,height:15}},{id:"otc-edp-per-tenant.cloudServices.postgres",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["8msu1q"],outEdges:[],kind:"instance",title:"PostgreSQL",description:{txt:`PostgreSQL is a powerful, open source object-relational database system.
It has more than 15 years of active development and a proven architecture
that has earned it a strong reputation for reliability, data integrity,
and correctness.`},technology:"PostgreSQL",tags:[],icon:"tech:postgresql",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.postgres",modelRef:"postgres",x:108,y:887,width:354,height:180,labelBBox:{x:46,y:17,width:292,height:139}},{id:"otc-edp-per-tenant.cloudServices.redis",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["120qe5o"],outEdges:[],kind:"instance",title:"Redis",description:{txt:"Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker."},technology:"Redis",tags:[],icon:"tech:redis",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.redis",modelRef:"redis",x:592,y:887,width:359,height:180,labelBBox:{x:47,y:26,width:297,height:121}},{id:"otc-edp-per-tenant.cloudServices.objectstorage",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["ealiax"],outEdges:[],kind:"instance",title:"s3 Object Storage",description:{txt:"s3 Object Storage"},technology:"S3 Object Storage",tags:[],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.objectstorage",modelRef:"objectstorage",x:1082,y:887,width:320,height:180,labelBBox:{x:78,y:53,width:164,height:67}},{id:"otc-edp-per-tenant.cloudServices.elasticsearch",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["1trj5u6"],outEdges:[],kind:"instance",title:"Elasticsearch",description:{txt:`Elasticsearch is a distributed, RESTful search and analytics engine capable of
addressing a growing number of use cases. It centrally stores your data so you can
2025-12-16 12:13:34 +01:00
discover the expected and uncover the unexpected.`},technology:"Elasticsearch",tags:[],icon:"tech:elasticsearch",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.elasticsearch",modelRef:"elasticsearch",x:1532,y:887,width:370,height:180,labelBBox:{x:46,y:17,width:308,height:139}}],edges:[{id:"1ir70dd",source:"otc-edp-per-tenant.cce.edp.ingressNginx",target:"otc-edp-per-tenant.cce.edp.argoCD",label:"https",points:[[1452,383],[1455,427],[1458,481],[1461,526]],labelBBox:{x:1459,y:448,width:34,height:18},parent:"otc-edp-per-tenant.cce.edp",relations:["1yssos5"],color:"gray",line:"dashed",head:"normal"},{id:"1kr1wg1",source:"otc-edp-per-tenant.cce.edp.ingressNginx",target:"otc-edp-per-tenant.cce.edp.forgejo",label:"https",points:[[1329,383],[1268,429],[1195,484],[1133,530]],labelBBox:{x:1241,y:448,width:34,height:18},parent:"otc-edp-per-tenant.cce.edp",relations:["123efwn"],color:"gray",line:"dashed",head:"normal"},{id:"1dcszi5",source:"otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner",target:"otc-edp-per-tenant.cce.edp.forgejo",label:"registers",points:[[646,383],[714,429],[797,485],[866,531]],labelBBox:{x:776,y:448,width:58,height:18},parent:"otc-edp-per-tenant",relations:["g9oj4f"],color:"gray",line:"dashed",head:"normal"},{id:"8msu1q",source:"otc-edp-per-tenant.cce.edp.forgejo",target:"otc-edp-per-tenant.cloudServices.postgres",label:null,points:[[837,684],[743,718],[626,764],[527,815],[490,835],[452,858],[417,881]],labelBBox:null,parent:"otc-edp-per-tenant",relations:["hks76r"],color:"gray",line:"dashed",head:"normal"},{id:"120qe5o",source:"otc-edp-per-tenant.cce.edp.forgejo",target:"otc-edp-per-tenant.cloudServices.redis",label:null,points:[[947,716],[914,766],[872,827],[838,878]],labelBBox:null,parent:"otc-edp-per-tenant",relations:["1w18ve8"],color:"gray",line:"dashed",head:"normal"},{id:"ealiax",source:"otc-edp-per-tenant.cce.edp.forgejo",target:"otc-edp-per-tenant.cloudServices.objectstorage",label:null,points:[[1067,716],[1100,766],[1142,827],[1176,878]],labelBBox:null,parent:"otc-edp-per-tenant",relations:["15njmlz"],color:"gray",line:"dashed",head:"normal"},{id:"1trj5u6",source:"otc-edp-per-tenant.cce.edp.forgejo",target:"otc-edp-per-tenant.cloudServices.elasticsearch",label:null,points:[[1104,716],[1144,748],[1192,780],[1242,798],[1336,833],[1372,784],[1467,815],[1512,830],[1557,855],[1596,881]],labelBBox:null,parent:"otc-edp-per-tenant",relations:["1fzhjm9"],color:"gray",line:"dashed",head:"normal"}]},"edp-foundry-central-service":{_type:"deployment",tags:null,links:null,_stage:"layouted",sourcePath:"views/deployment/otc/foundry.c4",description:null,title:"EDP Foundry Central Service",id:"edp-foundry-central-service",autoLayout:{direction:"TB"},hash:"8f8eb235b0e8ff555a22ed61d124ba68e67e5ee2",bounds:{x:0,y:0,width:3894,height:1218},nodes:[{id:"otc-edpFoundry",parent:null,level:0,children:["otc-edpFoundry.cce","otc-edpFoundry.forgejoRunnerInfrastructure","otc-edpFoundry.workflowSetupEDPInfrastructure","otc-edpFoundry.workflowSetupArgoCDInfrastructure"],inEdges:[],outEdges:[],deploymentRef:"otc-edpFoundry",title:"OTC EDP Foundry Central Service clusters",kind:"cloud",technology:"OTC",color:"slate",shape:"rectangle",description:{txt:`OTC environments for the central EDP Foundry services. This is kubernetes clusters and other infrastructure like nodes and vms, and optionally platform services. All is set up by IaC terraform and edpbuilder.
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
A tenant is a folder in Foundry-Config-Forgejo. On merge triggers reconciliation to EDP.
Optionally we will have a WebUI/API/CLI`},tags:[],style:{opacity:15,size:"md"},depth:3,x:8,y:8,width:3878,height:1202,labelBBox:{x:6,y:0,width:280,height:15}},{id:"otc-edpFoundry.cce",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.cce.internalServices","otc-edpFoundry.cce.centralObservability"],inEdges:["628xl1"],outEdges:["84397w","1oz2va9"],deploymentRef:"otc-edpFoundry.cce",title:"OTC CCE",kind:"kubernetes",technology:"Kubernetes",color:"red",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"OTC Container Cluster Engine"},tags:[],style:{opacity:15,size:"md"},depth:2,x:58,y:79,width:2360,height:755,labelBBox:{x:6,y:0,width:54,height:15}},{id:"otc-edpFoundry.cce.internalServices",parent:"otc-edpFoundry.cce",level:2,children:["otc-edpFoundry.cce.internalServices.externalSecrets","otc-edpFoundry.cce.internalServices.ingressNginx","otc-edpFoundry.cce.internalServices.argoCD","otc-edpFoundry.cce.internalServices.forgejo","otc-edpFoundry.cce.internalServices.openbao"],inEdges:["628xl1"],outEdges:["84397w","1oz2va9"],deploymentRef:"otc-edpFoundry.cce.internalServices",title:"EDP Foundry Internal Services",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:1028,y:150,width:1340,height:634,labelBBox:{x:6,y:0,width:201,height:15}},{id:"otc-edpFoundry.cce.internalServices.externalSecrets",parent:"otc-edpFoundry.cce.internalServices",level:3,children:[],inEdges:[],outEdges:[],kind:"instance",title:"external-secrets",description:{txt:"Provider to access externally stored Kubernetes secrets"},tags:["internal"],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.externalSecrets",modelRef:"edp.externalSecrets",navigateTo:"externalSecrets",x:1308,y:222,width:320,height:180,labelBBox:{x:39,y:54,width:242,height:65}},{id:"otc-edpFoundry.cce.centralObservability",parent:"otc-edpFoundry.cce",level:2,children:["otc-edpFoundry.cce.centralObservability.grafana","otc-edpFoundry.cce.centralObservability.prometheus","otc-edpFoundry.cce.centralObservability.loki"],inEdges:[],outEdges:[],deploymentRef:"otc-edpFoundry.cce.centralObservability",title:"EDP Foundry Central Observability",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:108,y:150,width:870,height:634,labelBBox:{x:6,y:0,width:232,height:15}},{id:"otc-edpFoundry.forgejoRunnerInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner"],inEdges:[],outEdges:["628xl1"],deploymentRef:"otc-edpFoundry.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"green",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},depth:1,x:2468,y:168,width:384,height:266,labelBBox:{x:6,y:0,width:235,height:15}},{id:"otc-edpFoundry.cce.centralObservability.grafana",parent:"otc-edpFoundry.cce.centralObservability",level:3,children:[],inEdges:[],outEdges:["qykxlm","yv49z5"],kind:"instance",title:"Grafana",description:{txt:"Data visualization and monitoring"},tags:[],icon:"tech:grafana",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.centralObservability.grafana",modelRef:"edp.grafana",x:289,y:222,width:345,height:180,labelBBox:{x:47,y:63,width:283,height:47}},{id:"otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner",parent:"otc-edpFoundry.forgejoRunnerInfrastructure",level:2,children:[],inEdges:[],outEdges:["628xl1"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:2500,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edpFoundry.cce.cent
offering capabilities like
code version controling
collaboration and ticketing
2025-12-16 12:13:34 +01:00
and security scanning`},technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.forgejo",modelRef:"edp.forgejo",navigateTo:"forgejo",x:1978,y:554,width:340,height:180,labelBBox:{x:46,y:18,width:278,height:139}},{id:"otc-edpFoundry.cce.internalServices.openbao",parent:"otc-edpFoundry.cce.internalServices",level:3,children:[],inEdges:["u5oqat"],outEdges:[],kind:"instance",title:"OpenBao",description:{txt:"Secure secret storage"},tags:[],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.openbao",modelRef:"edp.openbao",x:1528,y:554,width:320,height:180,labelBBox:{x:85,y:63,width:151,height:48}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner","otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker","otc-edpFoundry.workflowSetupEDPInfrastructure.edpworkflow"],inEdges:["84397w"],outEdges:[],deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure",title:"EDP infrastructure Workflow",kind:"computeressource",color:"amber",shape:"rectangle",description:{txt:"EDP infrastructure Workflow"},tags:[],style:{opacity:15,size:"md"},depth:1,x:2902,y:150,width:442,height:1010,labelBBox:{x:6,y:0,width:201,height:15}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner","otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunnerWorker","otc-edpFoundry.workflowSetupArgoCDInfrastructure.edpworkflow"],inEdges:["1oz2va9"],outEdges:[],deploymentRef:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",title:"EDP ArgoCD Workflow",kind:"computeressource",color:"amber",shape:"rectangle",description:{txt:"EDP Setup ArgoCD Workflow"},tags:[],style:{opacity:15,size:"md"},depth:1,x:3394,y:150,width:442,height:1010,labelBBox:{x:6,y:0,width:149,height:15}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",level:2,children:[],inEdges:["84397w"],outEdges:["1hnil62"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:2961,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner",parent:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",level:2,children:[],inEdges:["1oz2va9"],outEdges:["1gtxobu"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:3466,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",level:2,children:[],inEdges:["1hnil62"],outEdges:["ekzztw"],kind:"instance",title:"Forgejo Runner Worker",description:{txt:"A worker is a service that runs a job invoked by a runner. A worker typically is a container."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",modelRef:"forgejoRunnerWorker",x:2954,y:554,width:333,height:180,labelBBox:{x:18,y:45,width:297,height:84}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunnerWorker",parent:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",level:2,children:[],inEdges:["1gtxobu"]
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
A tenant is a folder in Foundry-Config-Forgejo. On merge triggers reconciliation to EDP.
2025-12-16 12:13:34 +01:00
Optionally we will have a WebUI/API/CLI`},tags:[],style:{opacity:15,size:"md"},depth:3,x:2052,y:8,width:3408,height:1609,labelBBox:{x:6,y:0,width:280,height:15}},{id:"otc-edpFoundry.cce",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.cce.internalServices","otc-edpFoundry.cce.centralObservability"],inEdges:["628xl1"],outEdges:["84397w","1oz2va9"],deploymentRef:"otc-edpFoundry.cce",title:"OTC CCE",kind:"kubernetes",technology:"Kubernetes",color:"red",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"OTC Container Cluster Engine"},tags:[],style:{opacity:15,size:"md"},depth:2,x:2594,y:79,width:1890,height:1488,labelBBox:{x:6,y:0,width:54,height:15}},{id:"otc-edpFoundry.cce.internalServices",parent:"otc-edpFoundry.cce",level:2,children:["otc-edpFoundry.cce.internalServices.externalSecrets","otc-edpFoundry.cce.internalServices.ingressNginx","otc-edpFoundry.cce.internalServices.argoCD","otc-edpFoundry.cce.internalServices.forgejo","otc-edpFoundry.cce.internalServices.openbao"],inEdges:["628xl1"],outEdges:["84397w","1oz2va9"],deploymentRef:"otc-edpFoundry.cce.internalServices",title:"EDP Foundry Internal Services",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:2644,y:883,width:1790,height:634,labelBBox:{x:6,y:0,width:201,height:15}},{id:"otc-edpFoundry.cce.internalServices.externalSecrets",parent:"otc-edpFoundry.cce.internalServices",level:3,children:[],inEdges:[],outEdges:[],kind:"instance",title:"external-secrets",description:{txt:"Provider to access externally stored Kubernetes secrets"},tags:["internal"],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.externalSecrets",modelRef:"edp.externalSecrets",navigateTo:"externalSecrets",x:2694,y:1287,width:320,height:180,labelBBox:{x:39,y:54,width:242,height:66}},{id:"otc-edpFoundry.cce.centralObservability",parent:"otc-edpFoundry.cce",level:2,children:["otc-edpFoundry.cce.centralObservability.grafana","otc-edpFoundry.cce.centralObservability.prometheus","otc-edpFoundry.cce.centralObservability.loki"],inEdges:[],outEdges:[],deploymentRef:"otc-edpFoundry.cce.centralObservability",title:"EDP Foundry Central Observability",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:3349,y:150,width:870,height:634,labelBBox:{x:6,y:0,width:232,height:15}},{id:"otc-edpFoundry.forgejoRunnerInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner"],inEdges:[],outEdges:["628xl1"],deploymentRef:"otc-edpFoundry.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"green",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},depth:1,x:5026,y:168,width:384,height:266,labelBBox:{x:6,y:0,width:235,height:15}},{id:"otc-edp-per-tenant",parent:null,level:0,children:["otc-edp-per-tenant.forgejoRunnerInfrastructure","otc-edp-per-tenant.cce","otc-edp-per-tenant.cloudServices"],inEdges:["1asm38z","1or831y","ejqwjt"],outEdges:[],deploymentRef:"otc-edp-per-tenant",title:"OTC EDP per tenant cluster",kind:"cloud",technology:"OTC",color:"slate",shape:"rectangle",description:{txt:`OTC environment for EDP. EDP is the environment a customer gets from us.
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
This is kubernetes clusters and other infrastructure like nodes and vms, and platform services. All is set up by IaC-pipelines in the Foundry.`},tags:[],style:{opacity:15,size:"md"},depth:3,x:8,y:97,width:1994,height:1889,labelBBox:{x:6,y:0,width:181,height:15}},{id:"otc-edp-per-tenant.forgejoRunnerInfrastructure",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner"],inEdges:[],outEdges:["1dcszi5"],deploymentRef:"otc-edp-per-tenant.forgejoRunnerInfrastructure",title:"EDP ForgejoRunner infrastructure",kind:"computeressource",color:"primary",shape:"rectangle",modelRef:"forgejoRunner",description:{txt:"Infrastructure for Forgejo runners like pods, vms, lxds, etc"},tags:[],style:{opacity:15,size:"md"},depth:1,x:608,y:168,width:384,height:266,labelBBox:{x:6,y:0,width:235,height:15}},{id:"otc-edpFoundry.cce.centralObservability.grafana",parent:"otc-edpFoundry.cce.centralObservability",level:3,children:[],inEdges:[],outEdges:["qykxlm","yv49z5"],kind:"instance",title:"Grafana",description:{txt:"Data visualization and monitoring"},tags:[],icon:"tech:grafana",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.centralObservability.grafana",modelRef:"edp.grafana",x:3530,y:222,width:345,height:180,labelBBox:{x:47,y:63,width:283,height:47}},{id:"otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner",parent:"otc-edpFoundry.forgejoRunnerInfrastructure",level:2,children:[],inEdges:[],outEdges:["628xl1"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.forgejoRunnerInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:5058,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edp-per-tenant.cce",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.cce.edp"],inEdges:["1or831y","ejqwjt","1dcszi5"],outEdges:["8msu1q","120qe5o","ealiax","1trj5u6"],deploymentRef:"otc-edp-per-tenant.cce",title:"OTC CCE",kind:"kubernetes",technology:"Kubernetes",color:"red",shape:"rectangle",icon:"tech:kubernetes",description:{txt:"OTC Container Cluster Engine"},tags:[],style:{opacity:15,size:"md"},depth:2,x:548,y:830,width:1404,height:719,labelBBox:{x:6,y:0,width:54,height:15}},{id:"otc-edp-per-tenant.cce.edp",parent:"otc-edp-per-tenant.cce",level:2,children:["otc-edp-per-tenant.cce.edp.externalSecrets","otc-edp-per-tenant.cce.edp.ingressNginx","otc-edp-per-tenant.cce.edp.argoCD","otc-edp-per-tenant.cce.edp.forgejo"],inEdges:["1or831y","ejqwjt","1dcszi5"],outEdges:["8msu1q","120qe5o","ealiax","1trj5u6"],deploymentRef:"otc-edp-per-tenant.cce.edp",title:"EDP",kind:"cluster",color:"primary",shape:"rectangle",tags:[],style:{opacity:15,size:"md"},depth:1,x:580,y:883,width:1340,height:634,labelBBox:{x:6,y:0,width:27,height:15}},{id:"otc-edp-per-tenant.cce.edp.externalSecrets",parent:"otc-edp-per-tenant.cce.edp",level:3,children:[],inEdges:[],outEdges:[],kind:"instance",title:"external-secrets",description:{txt:"Provider to access externally stored Kubernetes secrets"},tags:["internal"],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.externalSecrets",modelRef:"edp.externalSecrets",navigateTo:"externalSecrets",x:1550,y:1287,width:320,height:180,labelBBox:{x:39,y:54,width:242,height:66}},{id:"otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner",parent:"otc-edp-per-tenant.forgejoRunnerInfrastructure",level:2,children:[],inEdges:[],outEdges:["1dcszi5"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edp-per-tenant.forgejoRunnerInfrastructure.forgejoRunner",modelRef:"forgejoRunn
offering capabilities like
code version controling
collaboration and ticketing
and security scanning`},technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.forgejo",modelRef:"edp.forgejo",navigateTo:"forgejo",x:4044,y:1287,width:340,height:180,labelBBox:{x:46,y:18,width:278,height:139}},{id:"otc-edpFoundry.cce.internalServices.openbao",parent:"otc-edpFoundry.cce.internalServices",level:3,children:[],inEdges:["u5oqat"],outEdges:[],kind:"instance",title:"OpenBao",description:{txt:"Secure secret storage"},tags:[],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edpFoundry.cce.internalServices.openbao",modelRef:"edp.openbao",x:3594,y:1287,width:320,height:180,labelBBox:{x:85,y:63,width:151,height:48}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner","otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker","otc-edpFoundry.workflowSetupEDPInfrastructure.edpworkflow"],inEdges:["84397w"],outEdges:["1asm38z","1or831y"],deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure",title:"EDP infrastructure Workflow",kind:"computeressource",color:"amber",shape:"rectangle",description:{txt:"EDP infrastructure Workflow"},tags:[],style:{opacity:15,size:"md"},depth:1,x:4534,y:150,width:442,height:1035,labelBBox:{x:6,y:0,width:201,height:15}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",parent:"otc-edpFoundry",level:1,children:["otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner","otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunnerWorker","otc-edpFoundry.workflowSetupArgoCDInfrastructure.edpworkflow"],inEdges:["1oz2va9"],outEdges:["ejqwjt"],deploymentRef:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",title:"EDP ArgoCD Workflow",kind:"computeressource",color:"amber",shape:"rectangle",description:{txt:"EDP Setup ArgoCD Workflow"},tags:[],style:{opacity:15,size:"md"},depth:1,x:2102,y:150,width:442,height:1035,labelBBox:{x:6,y:0,width:149,height:15}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",level:2,children:[],inEdges:["84397w"],outEdges:["1hnil62"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:4595,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner",parent:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",level:2,children:[],inEdges:["1oz2va9"],outEdges:["1gtxobu"],kind:"instance",title:"Forgejo Runner",description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunner",modelRef:"forgejoRunner",x:2163,y:222,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}},{id:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",parent:"otc-edpFoundry.workflowSetupEDPInfrastructure",level:2,children:[],inEdges:["1hnil62"],outEdges:["ekzztw"],kind:"instance",title:"Forgejo Runner Worker",description:{txt:"A worker is a service that runs a job invoked by a runner. A worker typically is a container."},tags:[],color:"primary",shape:"rectangle",style:{opacity:15,size:"md"},deploymentRef:"otc-edpFoundry.workflowSetupEDPInfrastructure.forgejoRunnerWorker",modelRef:"forgejoRunnerWorker",x:4588,y:554,width:333,height:180,labelBBox:{x:18,y:45,width:297,height:84}},{id:"otc-edpFoundry.workflowSetupArgoCDInfrastructure.forgejoRunnerWorker",parent:"otc-edpFoundry.workflowSetupArgoCDInfrastructure",level:2,ch
offering capabilities like
code version controling
collaboration and ticketing
and security scanning`},technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cce.edp.forgejo",modelRef:"edp.forgejo",navigateTo:"forgejo",x:630,y:1287,width:340,height:180,labelBBox:{x:46,y:18,width:278,height:139}},{id:"otc-edp-per-tenant.cloudServices",parent:"otc-edp-per-tenant",level:1,children:["otc-edp-per-tenant.cloudServices.postgres","otc-edp-per-tenant.cloudServices.redis","otc-edp-per-tenant.cloudServices.objectstorage","otc-edp-per-tenant.cloudServices.elasticsearch"],inEdges:["1asm38z","8msu1q","120qe5o","ealiax","1trj5u6"],outEdges:[],deploymentRef:"otc-edp-per-tenant.cloudServices",title:"EDP Cloud Services",kind:"paas",technology:"Cloud Services",color:"primary",shape:"rectangle",description:{txt:"EDP Cloud Services"},tags:[],style:{opacity:15,size:"md"},depth:1,x:58,y:1634,width:1894,height:302,labelBBox:{x:6,y:0,width:127,height:15}},{id:"otc-edp-per-tenant.cloudServices.postgres",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["8msu1q"],outEdges:[],kind:"instance",title:"PostgreSQL",description:{txt:`PostgreSQL is a powerful, open source object-relational database system.
It has more than 15 years of active development and a proven architecture
that has earned it a strong reputation for reliability, data integrity,
and correctness.`},technology:"PostgreSQL",tags:[],icon:"tech:postgresql",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.postgres",modelRef:"postgres",x:1548,y:1706,width:354,height:180,labelBBox:{x:46,y:17,width:292,height:139}},{id:"otc-edp-per-tenant.cloudServices.redis",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["120qe5o"],outEdges:[],kind:"instance",title:"Redis",description:{txt:"Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker."},technology:"Redis",tags:[],icon:"tech:redis",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.redis",modelRef:"redis",x:608,y:1706,width:359,height:180,labelBBox:{x:47,y:26,width:297,height:121}},{id:"otc-edp-per-tenant.cloudServices.objectstorage",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["ealiax"],outEdges:[],kind:"instance",title:"s3 Object Storage",description:{txt:"s3 Object Storage"},technology:"S3 Object Storage",tags:[],color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"otc-edp-per-tenant.cloudServices.objectstorage",modelRef:"objectstorage",x:1098,y:1706,width:320,height:180,labelBBox:{x:78,y:53,width:164,height:67}},{id:"otc-edp-per-tenant.cloudServices.elasticsearch",parent:"otc-edp-per-tenant.cloudServices",level:2,children:[],inEdges:["1trj5u6"],outEdges:[],kind:"instance",title:"Elasticsearch",description:{txt:`Elasticsearch is a distributed, RESTful search and analytics engine capable of
addressing a growing number of use cases. It centrally stores your data so you can
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
and security scanning`},tags:[],technology:"Golang",kind:"container",isCustomized:!0,navigateTo:"forgejo",x:48,y:553,width:340,height:180,labelBBox:{x:46,y:17,width:279,height:139}},{id:"edp.garm",parent:"edp",level:1,children:["edp.garm.garm","edp.garm.providerEdgeConnect"],inEdges:["step-01","step-06","step-08","step-16"],outEdges:["step-03","step-04","step-07","step-09","step-18","step-19"],title:"Garm Image",modelRef:"edp.garm",shape:"rectangle",color:"primary",icon:"tech:docker",style:{opacity:20,size:"md"},tags:[],kind:"container",depth:1,x:709,y:142,width:1090,height:404,labelBBox:{x:6,y:0,width:77,height:15}},{id:"edp.garm.garm",parent:"edp.garm",level:2,children:[],inEdges:["step-01","step-06","step-08","step-16"],outEdges:["step-02","step-07","step-09","step-17"],title:"Garm",modelRef:"edp.garm.garm",shape:"rectangle",color:"primary",icon:"tech:go",style:{opacity:15,size:"md"},description:{txt:"Provisions runners for Forgejo"},tags:[],kind:"component",x:749,y:316,width:325,height:180,labelBBox:{x:47,y:63,width:262,height:47}},{id:"edp.garm.providerEdgeConnect",parent:"edp.garm",level:2,children:[],inEdges:["step-02","step-17"],outEdges:["step-03","step-04","step-18","step-19"],title:"Garm Provider for EdgeConnect",modelRef:"edp.garm.providerEdgeConnect",shape:"rectangle",color:"primary",icon:"tech:go",style:{opacity:15,size:"md"},description:{txt:"Acts as abstraction layer for EdgeConnect"},tags:[],kind:"component",x:1349,y:203,width:409,height:180,labelBBox:{x:47,y:54,width:347,height:65}},{id:"edgeConnect",parent:null,level:0,children:[],inEdges:["step-03","step-04","step-18","step-19"],outEdges:["step-05"],title:"EdgeConnect Cloud",modelRef:"edgeConnect",shape:"rectangle",color:"primary",style:{opacity:15,size:"md"},description:{txt:"Provides an API and control plane to run applications on the edge"},tags:[],kind:"system",x:2135,y:169,width:320,height:180,labelBBox:{x:24,y:54,width:273,height:65}},{id:"forgejoRunner",parent:null,level:0,children:[],inEdges:["step-05","step-09","step-12","step-15"],outEdges:["step-06","step-10","step-11","step-12","step-13","step-15"],title:"Forgejo Runner",modelRef:"forgejoRunner",shape:"rectangle",color:"primary",style:{opacity:15,size:"md"},description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],kind:"component",x:2665,y:810,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:101}}],edges:[{id:"step-01",source:"edp.forgejo",target:"edp.garm.garm",label:"(Webhook) A new job is pending",points:[[389,687],[482,703],[596,707],[689,664],[761,631],[818,563],[857,504]],labelBBox:{x:458,y:632,width:228,height:19},parent:"edp",relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@0"},{id:"step-02",source:"edp.garm.garm",target:"edp.garm.providerEdgeConnect",label:"Create new runner",points:[[1074,428],[1142,433],[1220,433],[1289,417],[1321,410],[1352,399],[1383,387]],labelBBox:{x:1144,y:385,width:141,height:19},parent:"edp.garm",relations:["1olxwwi"],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@1"},{id:"step-03",source:"edp.garm.providerEdgeConnect",target:"edgeConnect",label:"Create App (Runner)",points:[[1639,203],[1692,152],[1767,92],[1847,65],[1943,32],[1980,29],[2075,65],[2128,85],[2176,124],[2214,162]],labelBBox:{x:1886,y:7,width:156,height:19},parent:null,relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@2"},{id:"step-04",source:"edp.garm.providerEdgeConnect",target:"edgeConnect",label:"Create AppInstance (Runner)",points:[[1759,234],[1788,228],[1818,222],[1847,219],[1948,206],[1974,210],[2075,219],[2091,220],[2108,222],[2125,225]],labelBBox:{x:1859,y:178,width:209,height:19},parent:null,relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@3"},{id:"step-05",source:"edgeConnect",target:"forgejoRunner",label:"Deploys",points:[[2448,349],[2502,386],[2560,432],[2605,484],[2687,579],[2750,711],[2787,800]],labelBBox:{x:2524,y:372,width:77,height:19},parent:null,relatio
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
offering capabilities like
code version controling
collaboration and ticketing
2025-12-16 12:13:34 +01:00
and security scanning`},tags:[],technology:"Golang",kind:"container",isCustomized:!0,navigateTo:"forgejo",x:585,y:69,width:340,height:180,labelBBox:{x:45,y:17,width:279,height:139}}],edges:[{id:"step-01",source:"localbox.git",target:"edp.forgejogit",label:"git push",points:[[360,449],[430,449],[513,449],[585,449]],labelBBox:{x:429,y:417,width:75,height:19},parent:null,relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@0"},{id:"step-02",source:"edp.forgejogit",target:"forgejoRunner",label:"on push",points:[[896,539],[1008,612],[1151,708],[1172,734],[1219,795],[1184,836],[1232,896],[1233,898],[1235,900],[1236,901]],labelBBox:{x:1051,y:582,width:76,height:19},parent:null,relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@1"},{id:"step-03",source:"forgejoRunner",target:"edp.imageregistry",label:"pushes new image",points:[[1232,1012],[1159,1012],[1073,1003],[1001,972],[934,942],[874,886],[830,837]],labelBBox:{x:1018,y:940,width:143,height:19},parent:null,relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@2"},{id:"step-04",source:"forgejoRunner",target:"edp.forgejogit",label:"pushes new appspec",points:[[900,546],[915,561],[930,577],[941,594],[995,673],[940,726],[1001,800],[1034,839],[1139,892],[1232,933]],labelBBox:{x:1010,y:768,width:158,height:19},dir:"back",parent:null,relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@3"},{id:"step-05",source:"edp.forgejogit",target:"edp.argoCD",label:"triggers deployment",points:[[914,483],[1008,503],[1126,528],[1222,549]],labelBBox:{x:1015,y:473,width:148,height:19},parent:"edp",relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@4"},{id:"step-06",source:"edp.argoCD",target:"cloud",label:"deploys application",points:[[1487,675],[1596,779],[1775,949],[1887,1056]],labelBBox:{x:1621,y:769,width:145,height:19},parent:null,relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@5"},{id:"step-07",source:"cloud",target:"edp.imageregistry",label:"pulls image",points:[[818,837],[897,950],[1047,1129],[1232,1183],[1432,1241],[1674,1216],[1830,1188]],labelBBox:{x:1346,y:1151,width:97,height:19},dir:"back",parent:null,relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@6"}]},edpbuilderworkflow:{_type:"element",tags:null,links:null,viewOf:"edfbuilder",_stage:"layouted",sourcePath:"views/edp/edfbuilder.c4",description:{txt:"Describes the process how to create an EDP instance"},title:"edfbuilder",id:"edpbuilderworkflow",autoLayout:{direction:"LR",nodeSep:110,rankSep:120},hash:"40921acf4f52bd8d6d2ac3a0d1810b3b7bc13b2a",bounds:{x:0,y:0,width:320,height:180},nodes:[{id:"edfbuilder",parent:null,level:0,children:[],inEdges:[],outEdges:[],title:"edfbuilder",modelRef:"edfbuilder",shape:"rectangle",color:"primary",icon:"tech:go",style:{opacity:15,size:"md"},description:{txt:"EDP Foundry Builder"},tags:[],technology:"Golang",kind:"component",x:0,y:0,width:320,height:180,labelBBox:{x:74,y:53,width:203,height:67}}],edges:[]},edp:{_type:"element",tags:null,links:null,viewOf:"edp",_stage:"layouted",sourcePath:"views/edp/edp.c4",description:null,title:"Context view",id:"edp",autoLayout:{direction:"TB"},hash:"3ab95ff726e92d4e64a6b566beb19c19bcc22d22",bounds:{x:0,y:0,width:5229,height:943},nodes:[{id:"forgejoRunner",parent:null,level:0,children:[],inEdges:["stl3mw"],outEdges:["1cy1y20"],title:"Forgejo Runner",modelRef:"forgejoRunner",shape:"rectangle",color:"primary",style:{opacity:25,size:"md"},description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],kind:"component",x:0,y:392,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:102}},{id:"developer",parent:null,level:0,children:[],inEdges:[],outEdges:["1y3lcyj","1ttqc1r","170qzun","1bt83vj","1nv0w41","1agven9","3nxrq7","bfgapq"],title:"Developer",modelRef:"developer",shape:"person",color:"green",style:{opacity:25,size:"md"},description:{txt:"The regular user of the platfor
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
offering capabilities like
code version controling
collaboration and ticketing
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
discover the expected and uncover the unexpected.`},tags:[],technology:"Elasticsearch",kind:"container",x:1811,y:280,width:370,height:180,labelBBox:{x:46,y:17,width:308,height:139}},{id:"objectstorage",parent:null,level:0,children:[],inEdges:[],outEdges:[],title:"s3 Object Storage",modelRef:"objectstorage",shape:"rectangle",color:"primary",style:{opacity:20,size:"md"},description:{txt:"s3 Object Storage"},tags:[],technology:"S3 Object Storage",kind:"container",x:9,y:0,width:320,height:180,labelBBox:{x:78,y:53,width:164,height:67}},{id:"postgres",parent:null,level:0,children:[],inEdges:[],outEdges:[],title:"PostgreSQL",modelRef:"postgres",shape:"rectangle",color:"primary",icon:"tech:postgresql",style:{opacity:20,size:"md"},description:{txt:`PostgreSQL is a powerful, open source object-relational database system.
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
It has more than 15 years of active development and a proven architecture
that has earned it a strong reputation for reliability, data integrity,
and correctness.`},tags:[],technology:"PostgreSQL",kind:"container",x:692,y:0,width:354,height:180,labelBBox:{x:46,y:17,width:293,height:139}},{id:"redis",parent:null,level:0,children:[],inEdges:[],outEdges:[],title:"Redis",modelRef:"redis",shape:"rectangle",color:"primary",icon:"tech:redis",style:{opacity:20,size:"md"},description:{txt:"Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker."},tags:[],technology:"Redis",kind:"container",x:1237,y:0,width:359,height:180,labelBBox:{x:46,y:26,width:298,height:121}},{id:"platformdeveloper",parent:null,level:0,children:[],inEdges:[],outEdges:["mox1r9","vyep7i","1kjl8ep","x7to90"],title:"Platform Developer",modelRef:"platformdeveloper",shape:"person",color:"gray",style:{opacity:15,size:"md"},description:{txt:"The EDP engineer"},tags:[],kind:"actor",x:9,y:2205,width:320,height:180,labelBBox:{x:73,y:63,width:175,height:48}},{id:"customers",parent:null,level:0,children:[],inEdges:[],outEdges:["8fboq4"],title:"End Customers",modelRef:"customers",shape:"person",color:"amber",style:{opacity:15,size:"md"},description:{txt:"Consumers of your Application"},tags:[],kind:"actor",x:2431,y:2375,width:320,height:180,labelBBox:{x:56,y:63,width:208,height:48}},{id:"forgejoRunner",parent:null,level:0,children:[],inEdges:["5mpoyf"],outEdges:["1lyfj4n"],title:"Forgejo Runner",modelRef:"forgejoRunner",shape:"rectangle",color:"primary",style:{opacity:15,size:"md"},description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],kind:"component",x:2431,y:1872,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:102}},{id:"edfbuilder",parent:null,level:0,children:[],inEdges:["mox1r9"],outEdges:["lnq8uj"],title:"edfbuilder",modelRef:"edfbuilder",shape:"rectangle",color:"primary",icon:"tech:go",style:{opacity:15,size:"md"},description:{txt:"EDP Foundry Builder"},tags:[],technology:"Golang",kind:"component",navigateTo:"edpbuilderworkflow",x:709,y:2588,width:320,height:180,labelBBox:{x:74,y:53,width:203,height:67}},{id:"documentation",parent:null,level:0,children:[],inEdges:["1kjl8ep"],outEdges:["14bjpe1"],title:"Documentation",modelRef:"documentation",shape:"rectangle",color:"primary",icon:"tech:electron",style:{opacity:15,size:"md"},description:{txt:"Documentation system for EDP LikeC4 platform."},tags:[],technology:"Static Site Generator",kind:"system",navigateTo:"components-template-documentation",x:677,y:2085,width:384,height:180,labelBBox:{x:46,y:44,width:323,height:85}},{id:"edf",parent:null,level:0,children:[],inEdges:["lnq8uj","x7to90"],outEdges:["109bf6k"],title:"EDF",modelRef:"edf",shape:"rectangle",color:"primary",icon:"tech:kubernetes",style:{opacity:15,size:"md"},description:{txt:"EDP Foundry is a platform for building and deploying EDPs tenantwise."},tags:[],technology:"Kubernetes",kind:"system",x:1256,y:2428,width:321,height:180,labelBBox:{x:46,y:35,width:260,height:103}},{id:"@gr1",parent:null,kind:"@group",title:"developer-scope",color:"green",shape:"rectangle",children:["developer","otherProductLifecycleRoles","@gr2","@gr3"],inEdges:["1lyfj4n","14bjpe1","109bf6k"],outEdges:["1yfrmvt","1yfr9mr","162qbqw","1tbee2v","5mpoyf","1ivh6bj","17brhnu","35ru8e"],level:0,depth:2,tags:[],style:{border:"none",opacity:20},x:1189,y:1431,width:1052,height:746,labelBBox:{x:6,y:0,width:114,height:15}},{id:"developer",parent:"@gr1",level:1,children:[],inEdges:[],outEdges:["1yfrmvt","1yfr9mr","162qbqw","zjg544","1okgiq5"],title:"Developer",modelRef:"developer",shape:"person",color:"green",style:{opacity:15,size:"md"},description:{txt:"The regular user of the platform"},tags:[],kind:"actor",x:1257,y:1545,width:320,height:180,labelBBox:{x:53,y:63,width:214,height:48}},{id:"otherProductLifecycleRoles",parent:"@gr1",level:1,children:[],inEdges:[],outEdges:["1wupl5x"],title:"Reviewer, Tester, Auditors, Operators",modelRef:"otherProductLifecycleRoles",shape:"person",color:"green",style:{opacity:15,size:"md"},description:{txt:"Coworking roles i
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
addressing a growing number of use cases. It centrally stores your data so you can
discover the expected and uncover the unexpected.`},tags:[],technology:"Elasticsearch",kind:"container",x:2294,y:390,width:520,height:290,labelBBox:{x:72,y:46,width:406,height:189}},{id:"objectstorage",parent:null,level:0,children:[],inEdges:[],outEdges:[],title:"s3 Object Storage",modelRef:"objectstorage",shape:"rectangle",color:"primary",style:{opacity:20,size:"xl"},description:{txt:"s3 Object Storage"},tags:[],technology:"S3 Object Storage",kind:"container",x:0,y:0,width:520,height:290,labelBBox:{x:146,y:96,width:228,height:89}},{id:"postgres",parent:null,level:0,children:[],inEdges:[],outEdges:[],title:"PostgreSQL",modelRef:"postgres",shape:"rectangle",color:"primary",icon:"tech:postgresql",style:{opacity:20,size:"xl"},description:{txt:`PostgreSQL is a powerful, open source object-relational database system.
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
It has more than 15 years of active development and a proven architecture
that has earned it a strong reputation for reliability, data integrity,
and correctness.`},tags:[],technology:"PostgreSQL",kind:"container",x:859,y:0,width:520,height:290,labelBBox:{x:83,y:46,width:384,height:189}},{id:"redis",parent:null,level:0,children:[],inEdges:[],outEdges:[],title:"Redis",modelRef:"redis",shape:"rectangle",color:"primary",icon:"tech:redis",style:{opacity:20,size:"xl"},description:{txt:"Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker."},tags:[],technology:"Redis",kind:"container",x:1557,y:0,width:520,height:290,labelBBox:{x:80,y:58,width:391,height:165}},{id:"platformdeveloper",parent:null,level:0,children:[],inEdges:[],outEdges:["mox1r9","vyep7i","1kjl8ep","x7to90"],title:"Platform Developer",modelRef:"platformdeveloper",shape:"person",color:"gray",style:{opacity:15,size:"xl"},description:{txt:"The EDP engineer"},tags:[],kind:"actor",x:0,y:2852,width:520,height:290,labelBBox:{x:138,y:109,width:244,height:63}},{id:"customers",parent:null,level:0,children:[],inEdges:[],outEdges:["8fboq4"],title:"End Customers",modelRef:"customers",shape:"person",color:"amber",style:{opacity:15,size:"xl"},description:{txt:"Consumers of your Application"},tags:[],kind:"actor",x:3076,y:3022,width:520,height:290,labelBBox:{x:115,y:109,width:290,height:63}},{id:"forgejoRunner",parent:null,level:0,children:[],inEdges:["5mpoyf"],outEdges:["1lyfj4n"],title:"Forgejo Runner",modelRef:"forgejoRunner",shape:"rectangle",color:"primary",style:{opacity:15,size:"xl"},description:{txt:"A runner is a service that runs jobs triggered by Forgejo. A runner can have different technical implementations like a container or a VM."},tags:[],kind:"component",x:3076,y:2409,width:520,height:290,labelBBox:{x:69,y:71,width:382,height:139}},{id:"edfbuilder",parent:null,level:0,children:[],inEdges:["mox1r9"],outEdges:["lnq8uj"],title:"edfbuilder",modelRef:"edfbuilder",shape:"rectangle",color:"primary",icon:"tech:go",style:{opacity:15,size:"xl"},description:{txt:"EDP Foundry Builder"},tags:[],technology:"Golang",kind:"component",navigateTo:"edpbuilderworkflow",x:859,y:3275,width:520,height:290,labelBBox:{x:145,y:96,width:259,height:89}},{id:"documentation",parent:null,level:0,children:[],inEdges:["1kjl8ep"],outEdges:["14bjpe1"],title:"Documentation",modelRef:"documentation",shape:"rectangle",color:"primary",icon:"tech:electron",style:{opacity:15,size:"xl"},description:{txt:"Documentation system for EDP LikeC4 platform."},tags:[],technology:"Static Site Generator",kind:"system",navigateTo:"components-template-documentation",x:859,y:2662,width:520,height:290,labelBBox:{x:62,y:83,width:426,height:115}},{id:"edf",parent:null,level:0,children:[],inEdges:["lnq8uj","x7to90"],outEdges:["109bf6k"],title:"EDF",modelRef:"edf",shape:"rectangle",color:"primary",icon:"tech:kubernetes",style:{opacity:15,size:"xl"},description:{txt:"EDP Foundry is a platform for building and deploying EDPs tenantwise."},tags:[],technology:"Kubernetes",kind:"system",x:1557,y:3088,width:520,height:290,labelBBox:{x:106,y:71,width:339,height:139}},{id:"@gr1",parent:null,kind:"@group",title:"developer-scope",color:"green",shape:"rectangle",children:["developer","otherProductLifecycleRoles","@gr2","@gr3"],inEdges:["1lyfj4n","14bjpe1","109bf6k"],outEdges:["1yfrmvt","1yfr9mr","162qbqw","1tbee2v","5mpoyf","1ivh6bj","17brhnu","35ru8e"],level:0,depth:2,tags:[],style:{border:"none",opacity:20},x:1506,y:1871,width:1380,height:966,labelBBox:{x:6,y:0,width:114,height:15}},{id:"developer",parent:"@gr1",level:1,children:[],inEdges:[],outEdges:["1yfrmvt","1yfr9mr","162qbqw","zjg544","1okgiq5"],title:"Developer",modelRef:"developer",shape:"person",color:"green",style:{opacity:15,size:"xl"},description:{txt:"The regular user of the platform"},tags:[],kind:"actor",x:1557,y:1985,width:520,height:290,labelBBox:{x:111,y:109,width:298,height:63}},{id:"otherProductLifecycleRoles",parent:"@gr1",level:1,children:[],inEdges:[],outEdges:["1wupl5x"],title:"Reviewer, Tester, Auditors, Operators",modelRef:"otherProductLifecycleRoles",shape:"person",color:"green",style:{opacity:15,size:"xl"},description:{txt:"Coworkin
2025-12-16 12:13:34 +01:00
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 je=!1;function Be(h,m){if(!h||je)return"";je=!0;var b=Error.prepareStackTrace;Error.prepareStackTrace=void 0;try{var E={DetermineComponentFrameRoot:function(){try{if(m){var Re=function(){throw Error()};if(Object.defineProperty(Re.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(Re,[])}catch(we){var ye=we}Reflect.construct(h,[],Re)}else{try{Re.call()}catch(we){ye=we}h.call(Re.prototype)}}else{try{throw Error()}catch(we){ye=we}(Re=h())&&typeof Re.catch=="function"&&Re.catch(function(){})}}catch(we){if(we&&ye&&typeof we.stack=="string")return[we.stack,ye.stack]}return[null,null]}};E.DetermineComponentFrameRoot.displayName="DetermineComponentFrameRoot";var D=Object.getOwnPropertyDescriptor(E.DetermineComponentFrameRoot,"name");D&&D.configurable&&Object.defineProperty(E.DetermineComponentFrameRoot,"name",{value:"DetermineComponentFrameRoot"});var N=E.DetermineComponentFrameRoot(),X=N[0],ne=N[1];if(X&&ne){var se=X.split(`
2025-12-16 12:13:34 +01:00
`),ge=ne.split(`
`);for(D=E=0;E<se.length&&!se[E].includes("DetermineComponentFrameRoot");)E++;for(;D<ge.length&&!ge[D].includes("DetermineComponentFrameRoot");)D++;if(E===se.length||D===ge.length)for(E=se.length-1,D=ge.length-1;1<=E&&0<=D&&se[E]!==ge[D];)D--;for(;1<=E&&0<=D;E--,D--)if(se[E]!==ge[D]){if(E!==1||D!==1)do if(E--,D--,0>D||se[E]!==ge[D]){var Ee=`
`+se[E].replace(" at new "," at ");return h.displayName&&Ee.includes("<anonymous>")&&(Ee=Ee.replace("<anonymous>",h.displayName)),Ee}while(1<=E&&0<=D);break}}}finally{je=!1,Error.prepareStackTrace=b}return(b=h?h.displayName||h.name:"")?xe(b):""}function Je(h,m){switch(h.tag){case 26:case 27:case 5:return xe(h.type);case 16:return xe("Lazy");case 13:return h.child!==m&&m!==null?xe("Suspense Fallback"):xe("Suspense");case 19:return xe("SuspenseList");case 0:case 15:return Be(h.type,!1);case 11:return Be(h.type.render,!1);case 1:return Be(h.type,!0);case 31:return xe("Activity");default:return""}}function st(h){try{var m="",b=null;do m+=Je(h,b),b=h,h=h.return;while(h);return m}catch(E){return`
2025-12-16 12:13:34 +01:00
Error generating stack: `+E.message+`
`+E.stack}}var Le=Object.prototype.hasOwnProperty,St=e.unstable_scheduleCallback,Ve=e.unstable_cancelCallback,qe=e.unstable_shouldYield,Xe=e.unstable_requestPaint,It=e.unstable_now,Et=e.unstable_getCurrentPriorityLevel,be=e.unstable_ImmediatePriority,ke=e.unstable_UserBlockingPriority,Ye=e.unstable_NormalPriority,yt=e.unstable_LowPriority,xt=e.unstable_IdlePriority,Tr=e.log,er=e.unstable_setDisableYieldValue,qt=null,Ht=null;function Zr(h){if(typeof Tr=="function"&&er(h),Ht&&typeof Ht.setStrictMode=="function")try{Ht.setStrictMode(qt,h)}catch{}}var Gt=Math.clz32?Math.clz32:fn,ln=Math.log,Wn=Math.LN2;function fn(h){return h>>>=0,h===0?32:31-(ln(h)/Wn|0)|0}var oo=256,Yo=262144,jo=4194304;function ua(h){var m=h&42;if(m!==0)return m;switch(h&-h){case 1:return 1;case 2:return 2;case 4:return 4;case 8:return 8;case 16:return 16;case 32:return 32;case 64:return 64;case 128:return 128;case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:return h&261888;case 262144:case 524288:case 1048576:case 2097152:return h&3932160;case 4194304:case 8388608:case 16777216:case 33554432:return h&62914560;case 67108864:return 67108864;case 134217728:return 134217728;case 268435456:return 268435456;case 536870912:return 536870912;case 1073741824:return 0;default:return h}}function Dl(h,m,b){var E=h.pendingLanes;if(E===0)return 0;var D=0,N=h.suspendedLanes,X=h.pingedLanes;h=h.warmLanes;var ne=E&134217727;return ne!==0?(E=ne&~N,E!==0?D=ua(E):(X&=ne,X!==0?D=ua(X):b||(b=ne&~h,b!==0&&(D=ua(b))))):(ne=E&~N,ne!==0?D=ua(ne):X!==0?D=ua(X):b||(b=E&~h,b!==0&&(D=ua(b)))),D===0?0:m!==0&&m!==D&&(m&N)===0&&(N=D&-D,b=m&-m,N>=b||N===32&&(b&4194048)!==0)?m:D}function Ao(h,m){return(h.pendingLanes&~(h.suspendedLanes&~h.pingedLanes)&m)===0}function xs(h,m){switch(h){case 1:case 2:case 4:case 8:case 64:return m+250;case 16:case 32:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:return m+5e3;case 4194304:case 8388608:case 16777216:case 33554432:return-1;case 67108864:case 134217728:case 268435456:case 536870912:case 1073741824:return-1;default:return-1}}function ws(){var h=jo;return jo<<=1,(jo&62914560)===0&&(jo=4194304),h}function zc(h){for(var m=[],b=0;31>b;b++)m.push(h);return m}function Ml(h,m){h.pendingLanes|=m,m!==268435456&&(h.suspendedLanes=0,h.pingedLanes=0,h.warmLanes=0)}function lh(h,m,b,E,D,N){var X=h.pendingLanes;h.pendingLanes=b,h.suspendedLanes=0,h.pingedLanes=0,h.warmLanes=0,h.expiredLanes&=b,h.entangledLanes&=b,h.errorRecoveryDisabledLanes&=b,h.shellSuspendCounter=0;var ne=h.entanglements,se=h.expirationTimes,ge=h.hiddenUpdates;for(b=X&~b;0<b;){var Ee=31-Gt(b),Re=1<<Ee;ne[Ee]=0,se[Ee]=-1;var ye=ge[Ee];if(ye!==null)for(ge[Ee]=null,Ee=0;Ee<ye.length;Ee++){var we=ye[Ee];we!==null&&(we.lane&=-536870913)}b&=~Re}E!==0&&ks(h,E,0),N!==0&&D===0&&h.tag!==0&&(h.suspendedLanes|=N&~(X&~m))}function ks(h,m,b){h.pendingLanes|=m,h.suspendedLanes&=~m;var E=31-Gt(m);h.entangledLanes|=m,h.entanglements[E]=h.entanglements[E]|1073741824|b&261930}function tu(h,m){var b=h.entangledLanes|=m;for(h=h.entanglements;b;){var E=31-Gt(b),D=1<<E;D&m|h[E]&m&&(h[E]|=m),b&=~D}}function Xo(h,m){var b=m&-m;return b=(b&42)!==0?1:Tc(b),(b&(h.suspendedLanes|m))!==0?0:b}function Tc(h){switch(h){case 2:h=1;break;case 8:h=4;break;case 32:h=16;break;case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:case 4194304:case 8388608:case 16777216:case 33554432:h=128;break;case 268435456:h=134217728;break;default:h=0}return h}function _s(h){return h&=-h,2<h?8<h?(h&134217727)!==0?32:268435456:8:2}function ru(){var h=F.p;return h!==0?h:(h=window.event,h===void 0?32:Dge(h.type))}function Ss(h,m){var b=F.p;try{return F.p=h,m()}finally{F.p=b}}var Zo=Math.random().toString(36).slice(2),Nr="__reactFiber$"+Zo,Mn="__reactProps$"+Zo,Do="__reactContainer$"+Zo,Nl="__reactEvents$"+Zo,jc="__reactListeners$"+Zo,sh="__reactHandles$"+Zo,La="__reactResources$"
`).replace(Zxt,"")}function lge(h,m){return m=ige(m),ige(h)===m}function kr(h,m,b,E,D,N){switch(b){case"children":typeof E=="string"?m==="body"||m==="textarea"&&E===""||Fe(h,E):(typeof E=="number"||typeof E=="bigint")&&m!=="body"&&Fe(h,""+E);break;case"className":$s(h,"class",E);break;case"tabIndex":$s(h,"tabindex",E);break;case"dir":case"role":case"viewBox":case"width":case"height":$s(h,b,E);break;case"style":Ot(h,E,N);break;case"data":if(m!=="object"){$s(h,"data",E);break}case"src":case"href":if(E===""&&(m!=="a"||b!=="href")){h.removeAttribute(b);break}if(E==null||typeof E=="function"||typeof E=="symbol"||typeof E=="boolean"){h.removeAttribute(b);break}E=vt(""+E),h.setAttribute(b,E);break;case"action":case"formAction":if(typeof E=="function"){h.setAttribute(b,"javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')");break}else typeof N=="function"&&(b==="formAction"?(m!=="input"&&kr(h,m,"name",D.name,D,null),kr(h,m,"formEncType",D.formEncType,D,null),kr(h,m,"formMethod",D.formMethod,D,null),kr(h,m,"formTarget",D.formTarget,D,null)):(kr(h,m,"encType",D.encType,D,null),kr(h,m,"method",D.method,D,null),kr(h,m,"target",D.target,D,null)));if(E==null||typeof E=="symbol"||typeof E=="boolean"){h.removeAttribute(b);break}E=vt(""+E),h.setAttribute(b,E);break;case"onClick":E!=null&&(h.onclick=Lt);break;case"onScroll":E!=null&&Wt("scroll",h);break;case"onScrollEnd":E!=null&&Wt("scrollend",h);break;case"dangerouslySetInnerHTML":if(E!=null){if(typeof E!="object"||!("__html"in E))throw Error(o(61));if(b=E.__html,b!=null){if(D.children!=null)throw Error(o(60));h.innerHTML=b}}break;case"multiple":h.multiple=E&&typeof E!="function"&&typeof E!="symbol";break;case"muted":h.muted=E&&typeof E!="function"&&typeof E!="symbol";break;case"suppressContentEditableWarning":case"suppressHydrationWarning":case"defaultValue":case"defaultChecked":case"innerHTML":case"ref":break;case"autoFocus":break;case"xlinkHref":if(E==null||typeof E=="function"||typeof E=="boolean"||typeof E=="symbol"){h.removeAttribute("xlink:href");break}b=vt(""+E),h.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",b);break;case"contentEditable":case"spellCheck":case"draggable":case"value":case"autoReverse":case"externalResourcesRequired":case"focusable":case"preserveAlpha":E!=null&&typeof E!="function"&&typeof E!="symbol"?h.setAttribute(b,""+E):h.removeAttribute(b);break;case"inert":case"allowFullScreen":case"async":case"autoPlay":case"controls":case"default":case"defer":case"disabled":case"disablePictureInPicture":case"disableRemotePlayback":case"formNoValidate":case"hidden":case"loop":case"noModule":case"noValidate":case"open":case"playsInline":case"readOnly":case"required":case"reversed":case"scoped":case"seamless":case"itemScope":E&&typeof E!="function"&&typeof E!="symbol"?h.setAttribute(b,""):h.removeAttribute(b);break;case"capture":case"download":E===!0?h.setAttribute(b,""):E!==!1&&E!=null&&typeof E!="function"&&typeof E!="symbol"?h.setAttribute(b,E):h.removeAttribute(b);break;case"cols":case"rows":case"size":case"span":E!=null&&typeof E!="function"&&typeof E!="symbol"&&!isNaN(E)&&1<=E?h.setAttribute(b,E):h.removeAttribute(b);break;case"rowSpan":case"start":E==null||typeof E=="function"||typeof E=="symbol"||isNaN(E)?h.removeAttribute(b):h.setAttribute(b,E);break;case"popover":Wt("beforetoggle",h),Wt("toggle",h),Cs(h,"popover",E);break;case"xlinkActuate":Mo(h,"http://www.w3.org/1999/xlink","xlink:actuate",E);break;case"xlinkArcrole":Mo(h,"http://www.w3.org/1999/xlink","xlink:arcrole",E);break;case"xlinkRole":Mo(h,"http://www.w3.org/1999/xlink","xlink:role",E);break;case"xlinkShow":Mo(h,"http://www.w3.org/1999/xlink","xlink:show",E);break;case"xlinkTitle":Mo(h,"http://www.w3.org/1999/xlink","xlink:title",E);break;case"xlinkType":Mo(h,"http://www.w3.org/1999/xlink","xlink:type",E);break;case"xmlBase":Mo(h,"http://www.w3.org/XML/1998/namespace","xm
.`.concat(iet,` {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
overflow: hidden `).concat(o,`;
2025-12-16 12:13:34 +01:00
padding-right: `).concat(s,"px ").concat(o,`;
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
}
body[`).concat(Mm,`] {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
overflow: hidden `).concat(o,`;
overscroll-behavior: contain;
`).concat([r&&"position: relative ".concat(o,";"),n==="margin"&&`
padding-left: `.concat(a,`px;
padding-top: `).concat(i,`px;
2025-12-16 12:13:34 +01:00
padding-right: `).concat(l,`px;
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
margin-left:0;
margin-top:0;
2025-12-16 12:13:34 +01:00
margin-right: `).concat(s,"px ").concat(o,`;
`),n==="padding"&&"padding-right: ".concat(s,"px ").concat(o,";")].filter(Boolean).join(""),`
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
}
.`).concat(b4,` {
2025-12-16 12:13:34 +01:00
right: `).concat(s,"px ").concat(o,`;
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
}
.`).concat(x4,` {
2025-12-16 12:13:34 +01:00
margin-right: `).concat(s,"px ").concat(o,`;
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
}
.`).concat(b4," .").concat(b4,` {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
right: 0 `).concat(o,`;
}
.`).concat(x4," .").concat(x4,` {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
margin-right: 0 `).concat(o,`;
}
body[`).concat(Mm,`] {
`).concat(set,": ").concat(s,`px;
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
}
`)},hne=function(){var e=parseInt(document.body.getAttribute(Mm)||"0",10);return isFinite(e)?e:0},Ret=function(){S.useEffect(function(){return document.body.setAttribute(Mm,(hne()+1).toString()),function(){var e=hne()-1;e<=0?document.body.removeAttribute(Mm):document.body.setAttribute(Mm,e.toString())}},[])},zet=function(e){var r=e.noRelative,n=e.noImportant,o=e.gapMode,a=o===void 0?"margin":o;Ret();var i=S.useMemo(function(){return Eet(a)},[a]);return S.createElement(Cet,{styles:$et(i,!r,a,n?"":"!important")})},Mz=!1;if(typeof window<"u")try{var k4=Object.defineProperty({},"passive",{get:function(){return Mz=!0,!0}});window.addEventListener("test",k4,k4),window.removeEventListener("test",k4,k4)}catch{Mz=!1}var Nm=Mz?{passive:!1}:!1,Tet=function(e){return e.tagName==="TEXTAREA"},fne=function(e,r){if(!(e instanceof Element))return!1;var n=window.getComputedStyle(e);return n[r]!=="hidden"&&!(n.overflowY===n.overflowX&&!Tet(e)&&n[r]==="visible")},jet=function(e){return fne(e,"overflowY")},Aet=function(e){return fne(e,"overflowX")},mne=function(e,r){var n=r.ownerDocument,o=r;do{typeof ShadowRoot<"u"&&o instanceof ShadowRoot&&(o=o.host);var a=gne(e,o);if(a){var i=yne(e,o),l=i[1],s=i[2];if(l>s)return!0}o=o.parentNode}while(o&&o!==n.body);return!1},Det=function(e){var r=e.scrollTop,n=e.scrollHeight,o=e.clientHeight;return[r,n,o]},Met=function(e){var r=e.scrollLeft,n=e.scrollWidth,o=e.clientWidth;return[r,n,o]},gne=function(e,r){return e==="v"?jet(r):Aet(r)},yne=function(e,r){return e==="v"?Det(r):Met(r)},Net=function(e,r){return e==="h"&&r==="rtl"?-1:1},Pet=function(e,r,n,o,a){var i=Net(e,window.getComputedStyle(r).direction),l=i*o,s=n.target,c=r.contains(s),d=!1,u=l>0,p=0,f=0;do{if(!s)break;var g=yne(e,s),v=g[0],w=g[1],x=g[2],k=w-x-i*v;(v||k)&&gne(e,s)&&(p+=k,f+=v);var C=s.parentNode;s=C&&C.nodeType===Node.DOCUMENT_FRAGMENT_NODE?C.host:C}while(!c&&s!==document.body||c&&(r.contains(s)||r===s));return(u&&Math.abs(p)<1||!u&&Math.abs(f)<1)&&(d=!0),d},_4=function(e){return"changedTouches"in e?[e.changedTouches[0].clientX,e.changedTouches[0].clientY]:[0,0]},vne=function(e){return[e.deltaX,e.deltaY]},bne=function(e){return e&&"current"in e?e.current:e},Bet=function(e,r){return e[0]===r[0]&&e[1]===r[1]},Iet=function(e){return`
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
.block-interactivity-`.concat(e,` {pointer-events: none;}
.allow-interactivity-`).concat(e,` {pointer-events: all;}
`)},Oet=0,Pm=[];function Let(e){var r=S.useRef([]),n=S.useRef([0,0]),o=S.useRef(),a=S.useState(Oet++)[0],i=S.useState(pne)[0],l=S.useRef(e);S.useEffect(function(){l.current=e},[e]),S.useEffect(function(){if(e.inert){document.body.classList.add("block-interactivity-".concat(a));var w=aet([e.lockRef.current],(e.shards||[]).map(bne)).filter(Boolean);return w.forEach(function(x){return x.classList.add("allow-interactivity-".concat(a))}),function(){document.body.classList.remove("block-interactivity-".concat(a)),w.forEach(function(x){return x.classList.remove("allow-interactivity-".concat(a))})}}},[e.inert,e.lockRef.current,e.shards]);var s=S.useCallback(function(w,x){if("touches"in w&&w.touches.length===2||w.type==="wheel"&&w.ctrlKey)return!l.current.allowPinchZoom;var k=_4(w),C=n.current,_="deltaX"in w?w.deltaX:C[0]-k[0],$="deltaY"in w?w.deltaY:C[1]-k[1],R,T=w.target,A=Math.abs(_)>Math.abs($)?"h":"v";if("touches"in w&&A==="h"&&T.type==="range")return!1;var z=mne(A,T);if(!z)return!0;if(z?R=A:(R=A==="v"?"h":"v",z=mne(A,T)),!z)return!1;if(!o.current&&"changedTouches"in w&&(_||$)&&(o.current=R),!R)return!0;var j=o.current||R;return Pet(j,x,w,j==="h"?_:$)},[]),c=S.useCallback(function(w){var x=w;if(!(!Pm.length||Pm[Pm.length-1]!==i)){var k="deltaY"in x?vne(x):_4(x),C=r.current.filter(function(R){return R.name===x.type&&(R.target===x.target||x.target===R.shadowParent)&&Bet(R.delta,k)})[0];if(C&&C.should){x.cancelable&&x.preventDefault();return}if(!C){var _=(l.current.shards||[]).map(bne).filter(Boolean).filter(function(R){return R.contains(x.target)}),$=_.length>0?s(x,_[0]):!l.current.noIsolation;$&&x.cancelable&&x.preventDefault()}}},[]),d=S.useCallback(function(w,x,k,C){var _={name:w,delta:x,target:k,should:C,shadowParent:Fet(k)};r.current.push(_),setTimeout(function(){r.current=r.current.filter(function($){return $!==_})},1)},[]),u=S.useCallback(function(w){n.current=_4(w),o.current=void 0},[]),p=S.useCallback(function(w){d(w.type,vne(w),w.target,s(w,e.lockRef.current))},[]),f=S.useCallback(function(w){d(w.type,_4(w),w.target,s(w,e.lockRef.current))},[]);S.useEffect(function(){return Pm.push(i),e.setCallbacks({onScrollCapture:p,onWheelCapture:p,onTouchMoveCapture:f}),document.addEventListener("wheel",c,Nm),document.addEventListener("touchmove",c,Nm),document.addEventListener("touchstart",u,Nm),function(){Pm=Pm.filter(function(w){return w!==i}),document.removeEventListener("wheel",c,Nm),document.removeEventListener("touchmove",c,Nm),document.removeEventListener("touchstart",u,Nm)}},[]);var g=e.removeScrollBar,v=e.inert;return S.createElement(S.Fragment,null,v?S.createElement(i,{styles:Iet(a)}):null,g?S.createElement(zet,{noRelative:e.noRelative,gapMode:e.gapMode}):null)}function Fet(e){for(var r=null;e!==null;)e instanceof ShadowRoot&&(r=e.host,e=e.host),e=e.parentNode;return r}const Vet=met(une,Let);var xne=S.forwardRef(function(e,r){return S.createElement(w4,ls({},e,{ref:r,sideCar:Vet}))});xne.classNames=w4.classNames;function Ro(e){return Object.keys(e)}function qet(e){return e.replace(/[A-Z]/g,r=>`-${r.toLowerCase()}`)}function Het(e){return typeof e!="string"||!e.includes("var(--mantine-scale)")?e:e.match(/^calc\((.*?)\)$/)?.[1].split("*")[0].trim()}function S4(e){const r=Het(e);return typeof r=="number"?r:typeof r=="string"?r.includes("calc")||r.includes("var")?r:r.includes("px")?Number(r.replace("px","")):r.includes("rem")?Number(r.replace("rem",""))*16:r.includes("em")?Number(r.replace("em",""))*16:Number(r):NaN}function wne(e){return e==="0rem"?"0rem":`calc(${e} * var(--mantine-scale))`}function kne(e,{shouldScale:r=!1}={}){function n(o){if(o===0||o==="0")return`0${e}`;if(typeof o=="number"){const a=`${o/16}${e}`;return r?wne(a):a}if(typeof o=="string"){if(o===""||o.startsWith("calc(")||o.startsWith("clamp(")||o.includes("rgba("))return o;if(o.includes(","))return o.split(",").map(i=>n(i)).join(",");if(o.includes(" "))return o.split(" ").map(i=>n(i)).join(" ");const a=o.replace("px","");if(!Number.isNaN(Number(a))){const i=`${Number(a)/16}${e}`;return r?wne(i):i}}return o}return n}const Pe=kne("rem",{shouldScale:!0});
`;let Y,Z=!0;const O=j.numbers=="binary",W=j.numbers=="octal",K=j.numbers=="decimal",Q=j.numbers=="hexadecimal";if(L&&z&&v(z.toJSON)&&(z=z.toJSON()),!p(z)){if(w(z))return z.size==0?"new Map()":(M||(j.__inline1__=!0,j.__inline2__=!1),"new Map("+A(Array.from(z),j)+")");if(x(z))return z.size==0?"new Set()":"new Set("+A(Array.from(z),j)+")";if(d(z))return z.length==0?"Buffer.from([])":"Buffer.from("+A(Array.from(z),j)+")";if(c(z))return Y=[],j.wrap=!0,q&&(j.__inline1__=!1,j.__inline2__=!0),G||I(),a(z,te=>{Z=!1,G&&(j.__inline2__=!1),Y.push((M||G?"":B)+A(te,j))}),Z?"[]":G?"["+Y.join(", ")+"]":"["+U+Y.join(","+U)+U+(M?"":F)+"]";if(f(z)||g(z)){if(L)return JSON.stringify(Number(z));let te;if(K)te=String(z);else if(Q){let re=z.toString(16);V||(re=re.toUpperCase()),te="0x"+re}else O?te="0b"+z.toString(2):W&&(te="0o"+z.toString(8));return g(z)?te+"n":te}else return g(z)?L?JSON.stringify(Number(z)):z+"n":u(z)?(Y=[],j.wrap=!0,I(),n(z,(te,re)=>{Z=!1,Y.push((M?"":B)+A(te,j)+":"+(M?"":" ")+A(re,j))}),Z?"{}":"{"+U+Y.join(","+U)+U+(M?"":F)+"}"):L?JSON.stringify(z)||"null":String(z)}const ae=j.escapeEverything?R:T;return Y=z.replace(ae,(te,re,ue,_e,ce,pe)=>{if(re){if(j.minimal)return re;const je=re.charCodeAt(0),Be=re.charCodeAt(1);if(j.es6){const Je=(je-55296)*1024+Be-56320+65536;return"\\u{"+l(Je,V)+"}"}return i(l(je,V))+i(l(Be,V))}if(ue)return i(l(ue.charCodeAt(0),V));if(te=="\0"&&!L&&!_.test(pe.charAt(ce+1)))return"\\0";if(_e)return _e==H||j.escapeEverything?"\\"+_e:_e;if(C.test(te))return k[te];if(j.minimal&&!$.test(te))return te;const xe=l(te.charCodeAt(0),V);return L||xe.length>2?i(xe):"\\x"+("00"+xe).slice(-2)}),H=="`"&&(Y=Y.replace(/\$\{/g,"\\${")),j.isScriptContext&&(Y=Y.replace(/<\/(script|style)/gi,"<\\/$1").replace(/<!--/g,L?"\\u003C!--":"\\x3C!--")),j.wrap&&(Y=H+Y+H),Y};return A.version="3.0.2",$j=A,$j}lst();function sst({children:e,log:r}){return typeof document<"u"?null:y.jsx("script",{className:"tsr-once",dangerouslySetInnerHTML:{__html:[e,"",'if (typeof __TSR_SSR__ !== "undefined") __TSR_SSR__.cleanScripts()'].filter(Boolean).join(`
`)}})}function cst(){const e=Up(),r=(e.options.getScrollRestorationKey||fle)(e.latestLocation),n=r!==fle(e.latestLocation)?r:null;return!e.isScrollRestoring||!e.isServer?null:y.jsx(sst,{children:`(${Wlt.toString()})(${JSON.stringify(ple)},${JSON.stringify(n)}, undefined, true)`,log:!1})}const dst=S.memo(function({matchId:e}){var r,n;const o=Up(),a=El({select:x=>{var k;return(k=x.matches.find(C=>C.id===e))==null?void 0:k.routeId}});Sk(a);const i=o.routesById[a],l=i.options.pendingComponent??o.options.defaultPendingComponent,s=l?y.jsx(l,{}):null,c=i.options.errorComponent??o.options.defaultErrorComponent,d=i.options.onCatch??o.options.defaultOnCatch,u=i.isRoot?i.options.notFoundComponent??((r=o.options.notFoundRoute)==null?void 0:r.options.component):i.options.notFoundComponent,p=(!i.isRoot||i.options.wrapInSuspense)&&(i.options.wrapInSuspense??l??((n=i.options.errorComponent)==null?void 0:n.preload))?S.Suspense:Cj,f=c?gle:Cj,g=u?ast:Cj,v=El({select:x=>x.loadedAt}),w=El({select:x=>{var k;const C=x.matches.findIndex(_=>_.id===e);return(k=x.matches[C-1])==null?void 0:k.routeId}});return y.jsxs(y.Fragment,{children:[y.jsx(Ele.Provider,{value:e,children:y.jsx(p,{fallback:s,children:y.jsx(f,{getResetKey:()=>v,errorComponent:c||kj,onCatch:(x,k)=>{if($k(x))throw x;d?.(x,k)},children:y.jsx(g,{fallback:x=>{if(!u||x.routeId&&x.routeId!==a||!x.routeId&&!i.isRoot)throw x;return S.createElement(u,x)},children:y.jsx(pst,{matchId:e})})})})}),w===mle&&o.options.scrollRestoration?y.jsxs(y.Fragment,{children:[y.jsx(ust,{}),y.jsx(cst,{})]}):null]})});function ust(){var e;const r=Up(),n=S.useRef(void 0);return y.jsx("script",{suppressHydrationWarning:!0,ref:o=>{var a;o&&(n.current===void 0||n.current.href!==((a=r.state.resolvedLocation)==null?void 0:a.href))&&(r.emit({type:"onRendered",...Ylt(r.state)}),n.current=r.state.resolvedLocation)}},(e=r.state.resolvedLocation)==null?void 0:e.state.key)}const pst=S.memo(function({matchId:e}){var r,n,o;const a=Up(),{match:i,key:l,routeId:s}=El({select:p=>{const f=p.matches.findIndex(k=>k.id===e),g=p.matches[f],v=g.routeId,w=a.routesById[v].options.remountDeps??a.options.defaultRemountDeps,x=w?.({routeId:v,loaderDeps:g.loaderDeps,params:g._strictParams,search:g._strictSearch});return{key:x?JSON.stringify(x):void 0,routeId:v,match:qlt(g,["id","status","error"])}},structuralSharing:!0}),c=a.routesById[s],d=S.useMemo(()=>{const p=c.options.component??a.options.defaultComponent;return p?y.jsx(p,{},l):y.jsx(hst,{})},[l,c.options.component,a.options.defaultComponent]),u=(c.options.errorComponent??a.options.defaultErrorComponent)||kj;if(i.status==="notFound")return Sk($k(i.error)),Cle(a,c,i.error);if(i.status==="redirected")throw Sk(Glt(i.error)),(r=a.getMatch(i.id))==null?void 0:r.loadPromise;if(i.status==="error"){if(a.isServer)return y.jsx(u,{error:i.error,reset:void 0,info:{componentStack:""}});throw i.error}if(i.status==="pending"){const p=c.options.pendingMinMs??a.options.defaultPendingMinMs;if(p&&!((n=a.getMatch(i.id))!=null&&n.minPendingPromise)&&!a.isServer){const f=Hlt();Promise.resolve().then(()=>{a.updateMatch(i.id,g=>({...g,minPendingPromise:f}))}),setTimeout(()=>{f.resolve(),a.updateMatch(i.id,g=>({...g,minPendingPromise:void 0}))},p)}throw(o=a.getMatch(i.id))==null?void 0:o.loadPromise}return d}),hst=S.memo(function(){const e=Up(),r=S.useContext(Ele),n=El({select:c=>{var d;return(d=c.matches.find(u=>u.id===r))==null?void 0:d.routeId}}),o=e.routesById[n],a=El({select:c=>{const d=c.matches.find(u=>u.id===r);return Sk(d),d.globalNotFound}}),i=El({select:c=>{var d;const u=c.matches,p=u.findIndex(f=>f.id===r);return(d=u[p+1])==null?void 0:d.id}});if(a)return Cle(e,o,void 0);if(!i)return null;const l=y.jsx(dst,{matchId:i}),s=e.options.defaultPendingComponent?y.jsx(e.options.defaultPendingComponent,{}):null;return r===mle?y.jsx(S.Suspense,{fallback:s,children:l}):l}),fst=typeof window<"u"?S.useLayoutEffect:S.useEffect;function mst(e,r,n={},o={}){const a=S.useRef(typeof IntersectionObserver=="function"),i=S.useRef(null);return S.useEffect(()=>{if(!(!e.current||!a.current||o.disabled))return i.current=n
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
`).replace(`
`,`
+`).split(`
`)),d=c.reduce((u,p)=>u.concat(...p),[]);return[c,d]}return[[],[]]},[e]);return S.useEffect(()=>{const c=r?.target??_ce,d=r?.actInsideInputWithModifier??!0;if(e!==null){const u=g=>{if(a.current=g.ctrlKey||g.metaKey||g.shiftKey||g.altKey,(!a.current||a.current&&!d)&&Ise(g))return!1;const v=Ece(g.code,s);if(i.current.add(g[v]),Sce(l,i.current,!1)){const w=g.composedPath?.()?.[0]||g.target,x=w?.nodeName==="BUTTON"||w?.nodeName==="A";r.preventDefault!==!1&&(a.current||!x)&&g.preventDefault(),o(!0)}},p=g=>{const v=Ece(g.code,s);Sce(l,i.current,!0)?(o(!1),i.current.clear()):i.current.delete(g[v]),g.key==="Meta"&&i.current.clear(),a.current=!1},f=()=>{i.current.clear(),o(!1)};return c?.addEventListener("keydown",u),c?.addEventListener("keyup",p),window.addEventListener("blur",f),window.addEventListener("contextmenu",f),()=>{c?.removeEventListener("keydown",u),c?.removeEventListener("keyup",p),window.removeEventListener("blur",f),window.removeEventListener("contextmenu",f)}}},[e,o]),n}function Sce(e,r,n){return e.filter(o=>n||o.length===r.size).some(o=>o.every(a=>r.has(a)))}function Ece(e,r){return r.includes(e)?"code":"key"}const kht=()=>{const e=qr();return S.useMemo(()=>({zoomIn:r=>{const{panZoom:n}=e.getState();return n?n.scaleBy(1.2,{duration:r?.duration}):Promise.resolve(!1)},zoomOut:r=>{const{panZoom:n}=e.getState();return n?n.scaleBy(1/1.2,{duration:r?.duration}):Promise.resolve(!1)},zoomTo:(r,n)=>{const{panZoom:o}=e.getState();return o?o.scaleTo(r,{duration:n?.duration}):Promise.resolve(!1)},getZoom:()=>e.getState().transform[2],setViewport:async(r,n)=>{const{transform:[o,a,i],panZoom:l}=e.getState();return l?(await l.setViewport({x:r.x??o,y:r.y??a,zoom:r.zoom??i},n),Promise.resolve(!0)):Promise.resolve(!1)},getViewport:()=>{const[r,n,o]=e.getState().transform;return{x:r,y:n,zoom:o}},setCenter:async(r,n,o)=>e.getState().setCenter(r,n,o),fitBounds:async(r,n)=>{const{width:o,height:a,minZoom:i,maxZoom:l,panZoom:s}=e.getState(),c=Xj(r,o,a,i,l,n?.padding??.1);return s?(await s.setViewport(c,{duration:n?.duration,ease:n?.ease,interpolate:n?.interpolate}),Promise.resolve(!0)):Promise.resolve(!1)},screenToFlowPosition:(r,n={})=>{const{transform:o,snapGrid:a,snapToGrid:i,domNode:l}=e.getState();if(!l)return r;const{x:s,y:c}=l.getBoundingClientRect(),d={x:r.x-s,y:r.y-c},u=n.snapGrid??a,p=n.snapToGrid??i;return cv(d,o,p,u)},flowToScreenPosition:r=>{const{transform:n,domNode:o}=e.getState();if(!o)return r;const{x:a,y:i}=o.getBoundingClientRect(),l=e5(r,n);return{x:l.x+a,y:l.y+i}}}),[])};function Cce(e,r){const n=[],o=new Map,a=[];for(const i of e)if(i.type==="add"){a.push(i);continue}else if(i.type==="remove"||i.type==="replace")o.set(i.id,[i]);else{const l=o.get(i.id);l?l.push(i):o.set(i.id,[i])}for(const i of r){const l=o.get(i.id);if(!l){n.push(i);continue}if(l[0].type==="remove")continue;if(l[0].type==="replace"){n.push({...l[0].item});continue}const s={...i};for(const c of l)_ht(c,s);n.push(s)}return a.length&&a.forEach(i=>{i.index!==void 0?n.splice(i.index,0,{...i.item}):n.push({...i.item})}),n}function _ht(e,r){switch(e.type){case"select":{r.selected=e.selected;break}case"position":{typeof e.position<"u"&&(r.position=e.position),typeof e.dragging<"u"&&(r.dragging=e.dragging);break}case"dimensions":{typeof e.dimensions<"u"&&(r.measured={...e.dimensions},e.setAttributes&&((e.setAttributes===!0||e.setAttributes==="width")&&(r.width=e.dimensions.width),(e.setAttributes===!0||e.setAttributes==="height")&&(r.height=e.dimensions.height))),typeof e.resizing=="boolean"&&(r.resizing=e.resizing);break}}}function Sht(e,r){return Cce(e,r)}function Eht(e,r){return Cce(e,r)}function Jp(e,r){return{id:e,type:"select",selected:r}}function pg(e,r=new Set,n=!1){const o=[];for(const[a,i]of e){const l=r.has(a);!(i.selected===void 0&&!l)&&i.selected!==l&&(n&&(i.selected=l),o.push(Jp(i.id,l)))}return o}function $ce({items:e=[],lookup:r}){const n=[],o=new Map(e.map(a=>[a.id,a]));for(const[a,i]of e.entries()){const l=r.get(i.id),s=l?.internals?.userNode??l;s!==void 0&&s!==i&&n.push({id:i.id,item:i,type:"replace"}),s===void 0&&n.push({item:i,type:"
M${z.x},${z.y}h${z.width}v${z.height}h${-z.width}z`,fillRule:"evenodd",pointerEvents:"none"})]})})}fde.displayName="MiniMap",S.memo(fde);const fmt=e=>r=>e?`${Math.max(1/r.transform[2],1)}`:void 0,mmt={[ug.Line]:"right",[ug.Handle]:"bottom-right"};function gmt({nodeId:e,position:r,variant:n=ug.Handle,className:o,style:a=void 0,children:i,color:l,minWidth:s=10,minHeight:c=10,maxWidth:d=Number.MAX_VALUE,maxHeight:u=Number.MAX_VALUE,keepAspectRatio:p=!1,resizeDirection:f,autoScale:g=!0,shouldResize:v,onResizeStart:w,onResize:x,onResizeEnd:k}){const C=Pce(),_=typeof e=="string"?e:C,$=qr(),R=S.useRef(null),T=n===ug.Handle,A=Jt(S.useCallback(fmt(T&&g),[T,g]),Vr),z=S.useRef(null),j=r??mmt[n];S.useEffect(()=>{if(!(!R.current||!_))return z.current||(z.current=Kpt({domNode:R.current,nodeId:_,getStoreItems:()=>{const{nodeLookup:P,transform:L,snapGrid:H,snapToGrid:M,nodeOrigin:V,domNode:B}=$.getState();return{nodeLookup:P,transform:L,snapGrid:H,snapToGrid:M,nodeOrigin:V,paneDomNode:B}},onChange:(P,L)=>{const{triggerNodeChanges:H,nodeLookup:M,parentLookup:V,nodeOrigin:B}=$.getState(),F=[],q={x:P.x,y:P.y},G=M.get(_);if(G&&G.expandParent&&G.parentId){const U=G.origin??B,Y=P.width??G.measured.width??0,Z=P.height??G.measured.height??0,O={id:G.id,parentId:G.parentId,rect:{width:Y,height:Z,...Nse({x:P.x??G.position.x,y:P.y??G.position.y},{width:Y,height:Z},G.parentId,M,U)}},W=oA([O],M,V,B);F.push(...W),q.x=P.x?Math.max(U[0]*Y,P.x):void 0,q.y=P.y?Math.max(U[1]*Z,P.y):void 0}if(q.x!==void 0&&q.y!==void 0){const U={id:_,type:"position",position:{...q}};F.push(U)}if(P.width!==void 0&&P.height!==void 0){const U={id:_,type:"dimensions",resizing:!0,setAttributes:f?f==="horizontal"?"width":"height":!0,dimensions:{width:P.width,height:P.height}};F.push(U)}for(const U of L){const Y={...U,type:"position"};F.push(Y)}H(F)},onEnd:({width:P,height:L})=>{const H={id:_,type:"dimensions",resizing:!1,dimensions:{width:P,height:L}};$.getState().triggerNodeChanges([H])}})),z.current.update({controlPosition:j,boundaries:{minWidth:s,minHeight:c,maxWidth:d,maxHeight:u},keepAspectRatio:p,resizeDirection:f,onResizeStart:w,onResize:x,onResizeEnd:k,shouldResize:v}),()=>{z.current?.destroy()}},[j,s,c,d,u,p,w,x,k,v]);const I=j.split("-");return y.jsx("div",{className:jn(["react-flow__resize-control","nodrag",...I,n,o]),ref:R,style:{...a,scale:A,...l&&{[T?"backgroundColor":"borderColor"]:l}},children:i})}S.memo(gmt);const{getOwnPropertyNames:ymt,getOwnPropertySymbols:vmt}=Object,{hasOwnProperty:bmt}=Object.prototype;function fA(e,r){return function(n,o,a){return e(n,o,a)&&r(n,o,a)}}function p5(e){return function(r,n,o){if(!r||!n||typeof r!="object"||typeof n!="object")return e(r,n,o);const{cache:a}=o,i=a.get(r),l=a.get(n);if(i&&l)return i===n&&l===r;a.set(r,n),a.set(n,r);const s=e(r,n,o);return a.delete(r),a.delete(n),s}}function xmt(e){return e?.[Symbol.toStringTag]}function mde(e){return ymt(e).concat(vmt(e))}const wmt=Object.hasOwn||((e,r)=>bmt.call(e,r));function eh(e,r){return e===r||!e&&!r&&e!==e&&r!==r}const kmt="__v",_mt="__o",Smt="_owner",{getOwnPropertyDescriptor:gde,keys:yde}=Object;function Emt(e,r){return e.byteLength===r.byteLength&&h5(new Uint8Array(e),new Uint8Array(r))}function Cmt(e,r,n){let o=e.length;if(r.length!==o)return!1;for(;o-- >0;)if(!n.equals(e[o],r[o],o,o,e,r,n))return!1;return!0}function $mt(e,r){return e.byteLength===r.byteLength&&h5(new Uint8Array(e.buffer,e.byteOffset,e.byteLength),new Uint8Array(r.buffer,r.byteOffset,r.byteLength))}function Rmt(e,r){return eh(e.getTime(),r.getTime())}function zmt(e,r){return e.name===r.name&&e.message===r.message&&e.cause===r.cause&&e.stack===r.stack}function Tmt(e,r){return e===r}function vde(e,r,n){const o=e.size;if(o!==r.size)return!1;if(!o)return!0;const a=new Array(o),i=e.entries();let l,s,c=0;for(;(l=i.next())&&!l.done;){const d=r.entries();let u=!1,p=0;for(;(s=d.next())&&!s.done;){if(a[p]){p++;continue}const f=l.value,g=s.value;if(n.equals(f[0],g[0],c,p,e,r,n)&&n.equals(f[1],g[1],f[0],g[0],e,r,n)){u=a[p]=!0;break}p++}if(!u)return!1;c++}return!0}const jmt=eh;function Amt(e,r,n){const o=yde
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
`).filter(i=>i),o=Math.min(...n.map(i=>i.length-i.trimStart().length)),a=n.map(i=>i.slice(o)).map(i=>" ".repeat(this.indent*2)+i);for(const i of a)this.content.push(i)}compile(){const r=Function,n=this?.args,o=[...(this?.content??[""]).map(a=>` ${a}`)];return new r(...n,o.join(`
`))}}const Lyt={major:4,minor:0,patch:0},an=Te("$ZodType",(e,r)=>{var n;e??(e={}),e._zod.def=r,e._zod.bag=e._zod.bag||{},e._zod.version=Lyt;const o=[...e._zod.def.checks??[]];e._zod.traits.has("$ZodCheck")&&o.unshift(e);for(const a of o)for(const i of a._zod.onattach)i(e);if(o.length===0)(n=e._zod).deferred??(n.deferred=[]),e._zod.deferred?.push(()=>{e._zod.run=e._zod.parse});else{const a=(i,l,s)=>{let c=Cv(i),d;for(const u of l){if(u._zod.def.when){if(!u._zod.def.when(i))continue}else if(c)continue;const p=i.issues.length,f=u._zod.check(i);if(f instanceof Promise&&s?.async===!1)throw new _v;if(d||f instanceof Promise)d=(d??Promise.resolve()).then(async()=>{await f,i.issues.length!==p&&(c||(c=Cv(i,p)))});else{if(i.issues.length===p)continue;c||(c=Cv(i,p))}}return d?d.then(()=>i):i};e._zod.run=(i,l)=>{const s=e._zod.parse(i,l);if(s instanceof Promise){if(l.async===!1)throw new _v;return s.then(c=>a(c,o,l))}return a(s,o,l)}}e["~standard"]={validate:a=>{try{const i=ryt(e,a);return i.success?{value:i.data}:{issues:i.error?.issues}}catch{return nyt(e,a).then(i=>i.success?{value:i.data}:{issues:i.error?.issues})}},vendor:"zod",version:1}}),M5=Te("$ZodString",(e,r)=>{an.init(e,r),e._zod.pattern=[...e?._zod.bag?.patterns??[]].pop()??Eyt(e._zod.bag),e._zod.parse=(n,o)=>{if(r.coerce)try{n.value=String(n.value)}catch{}return typeof n.value=="string"||n.issues.push({expected:"string",code:"invalid_type",input:n.value,inst:e}),n}}),Ur=Te("$ZodStringFormat",(e,r)=>{D5.init(e,r),M5.init(e,r)}),Fyt=Te("$ZodGUID",(e,r)=>{r.pattern??(r.pattern=uyt),Ur.init(e,r)}),Vyt=Te("$ZodUUID",(e,r)=>{if(r.version){const n={v1:1,v2:2,v3:3,v4:4,v5:5,v6:6,v7:7,v8:8}[r.version];if(n===void 0)throw new Error(`Invalid UUID version: "${r.version}"`);r.pattern??(r.pattern=Tpe(n))}else r.pattern??(r.pattern=Tpe());Ur.init(e,r)}),qyt=Te("$ZodEmail",(e,r)=>{r.pattern??(r.pattern=pyt),Ur.init(e,r)}),Hyt=Te("$ZodURL",(e,r)=>{Ur.init(e,r),e._zod.check=n=>{try{const o=n.value,a=new URL(o),i=a.href;r.hostname&&(r.hostname.lastIndex=0,r.hostname.test(a.hostname)||n.issues.push({code:"invalid_format",format:"url",note:"Invalid hostname",pattern:xyt.source,input:n.value,inst:e,continue:!r.abort})),r.protocol&&(r.protocol.lastIndex=0,r.protocol.test(a.protocol.endsWith(":")?a.protocol.slice(0,-1):a.protocol)||n.issues.push({code:"invalid_format",format:"url",note:"Invalid protocol",pattern:r.protocol.source,input:n.value,inst:e,continue:!r.abort})),!o.endsWith("/")&&i.endsWith("/")?n.value=i.slice(0,-1):n.value=i;return}catch{n.issues.push({code:"invalid_format",format:"url",input:n.value,inst:e,continue:!r.abort})}}}),Uyt=Te("$ZodEmoji",(e,r)=>{r.pattern??(r.pattern=fyt()),Ur.init(e,r)}),Wyt=Te("$ZodNanoID",(e,r)=>{r.pattern??(r.pattern=cyt),Ur.init(e,r)}),Gyt=Te("$ZodCUID",(e,r)=>{r.pattern??(r.pattern=oyt),Ur.init(e,r)}),Yyt=Te("$ZodCUID2",(e,r)=>{r.pattern??(r.pattern=ayt),Ur.init(e,r)}),Xyt=Te("$ZodULID",(e,r)=>{r.pattern??(r.pattern=iyt),Ur.init(e,r)}),Zyt=Te("$ZodXID",(e,r)=>{r.pattern??(r.pattern=lyt),Ur.init(e,r)}),Kyt=Te("$ZodKSUID",(e,r)=>{r.pattern??(r.pattern=syt),Ur.init(e,r)}),Qyt=Te("$ZodISODateTime",(e,r)=>{r.pattern??(r.pattern=Syt(r)),Ur.init(e,r)}),Jyt=Te("$ZodISODate",(e,r)=>{r.pattern??(r.pattern=kyt),Ur.init(e,r)}),e0t=Te("$ZodISOTime",(e,r)=>{r.pattern??(r.pattern=_yt(r)),Ur.init(e,r)}),t0t=Te("$ZodISODuration",(e,r)=>{r.pattern??(r.pattern=dyt),Ur.init(e,r)}),r0t=Te("$ZodIPv4",(e,r)=>{r.pattern??(r.pattern=myt),Ur.init(e,r),e._zod.onattach.push(n=>{const o=n._zod.bag;o.format="ipv4"})}),n0t=Te("$ZodIPv6",(e,r)=>{r.pattern??(r.pattern=gyt),Ur.init(e,r),e._zod.onattach.push(n=>{const o=n._zod.bag;o.format="ipv6"}),e._zod.check=n=>{try{new URL(`http://[${n.value}]`)}catch{n.issues.push({code:"invalid_format",format:"ipv6",input:n.value,inst:e,continue:!r.abort})}}}),o0t=Te("$ZodCIDRv4",(e,r)=>{r.pattern??(r.pattern=yyt),Ur.init(e,r)}),a0t=Te("$ZodCIDRv6",(e,r)=>{r.pattern??(r.pattern=vyt),Ur.init(e,r),e._zod.check=n=>{const[o,a]=n.value.split("/");try{if(!a)throw new Error;const i=Number(a);if(`${i}`!==a)throw new Error;if(i<0||i>128)throw new Err
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
if (${C}.issues.length) {
if (input[${_}] === undefined) {
if (${_} in input) {
newResult[${_}] = undefined;
}
} else {
payload.issues = payload.issues.concat(
${C}.issues.map((iss) => ({
...iss,
path: iss.path ? [${_}, ...iss.path] : [${_}],
}))
);
}
} else if (${C}.value === undefined) {
if (${_} in input) newResult[${_}] = undefined;
} else {
newResult[${_}] = ${C}.value;
}
2025-12-16 12:13:34 +01:00
`)}else{const C=v[k];p.write(`const ${C} = ${g(k)};`),p.write(`
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
if (${C}.issues.length) payload.issues = payload.issues.concat(${C}.issues.map(iss => ({
...iss,
path: iss.path ? [${Sv(k)}, ...iss.path] : [${Sv(k)}]
})));`),p.write(`newResult[${Sv(k)}] = ${C}.value`)}p.write("payload.value = newResult;"),p.write("return payload;");const x=p.compile();return(k,C)=>x(u,k,C)};let a;const i=AD,l=!wpe.jitless,s=l&&H1t.value,c=r.catchall;let d;e._zod.parse=(u,p)=>{d??(d=n.value);const f=u.value;if(!i(f))return u.issues.push({expected:"object",code:"invalid_type",input:f,inst:e}),u;const g=[];if(l&&s&&p?.async===!1&&p.jitless!==!0)a||(a=o(r.shape)),u=a(u,p);else{u.value={};const C=d.shape;for(const _ of d.keys){const $=C[_],R=$._zod.run({value:f[_],issues:[]},p),T=$._zod.optin==="optional"&&$._zod.optout==="optional";R instanceof Promise?g.push(R.then(A=>T?Bpe(A,u,_,f):N5(A,u,_))):T?Bpe(R,u,_,f):N5(R,u,_)}}if(!c)return g.length?Promise.all(g).then(()=>u):u;const v=[],w=d.keySet,x=c._zod,k=x.def.type;for(const C of Object.keys(f)){if(w.has(C))continue;if(k==="never"){v.push(C);continue}const _=x.run({value:f[C],issues:[]},p);_ instanceof Promise?g.push(_.then($=>N5($,u,C))):N5(_,u,C)}return v.length&&u.issues.push({code:"unrecognized_keys",keys:v,input:f,inst:e}),g.length?Promise.all(g).then(()=>u):u}});function Ipe(e,r,n,o){for(const a of e)if(a.issues.length===0)return r.value=a.value,r;return r.issues.push({code:"invalid_union",input:r.value,inst:n,errors:e.map(a=>a.issues.map(i=>ih(i,o,oh())))}),r}const g0t=Te("$ZodUnion",(e,r)=>{an.init(e,r),Hr(e._zod,"optin",()=>r.options.some(n=>n._zod.optin==="optional")?"optional":void 0),Hr(e._zod,"optout",()=>r.options.some(n=>n._zod.optout==="optional")?"optional":void 0),Hr(e._zod,"values",()=>{if(r.options.every(n=>n._zod.values))return new Set(r.options.flatMap(n=>Array.from(n._zod.values)))}),Hr(e._zod,"pattern",()=>{if(r.options.every(n=>n._zod.pattern)){const n=r.options.map(o=>o._zod.pattern);return new RegExp(`^(${n.map(o=>TD(o.source)).join("|")})$`)}}),e._zod.parse=(n,o)=>{let a=!1;const i=[];for(const l of r.options){const s=l._zod.run({value:n.value,issues:[]},o);if(s instanceof Promise)i.push(s),a=!0;else{if(s.issues.length===0)return s;i.push(s)}}return a?Promise.all(i).then(l=>Ipe(l,n,e,o)):Ipe(i,n,e,o)}}),y0t=Te("$ZodIntersection",(e,r)=>{an.init(e,r),e._zod.parse=(n,o)=>{const a=n.value,i=r.left._zod.run({value:a,issues:[]},o),l=r.right._zod.run({value:a,issues:[]},o);return i instanceof Promise||l instanceof Promise?Promise.all([i,l]).then(([s,c])=>Ope(n,s,c)):Ope(n,i,l)}});function PD(e,r){if(e===r)return{valid:!0,data:e};if(e instanceof Date&&r instanceof Date&&+e==+r)return{valid:!0,data:e};if(DD(e)&&DD(r)){const n=Object.keys(r),o=Object.keys(e).filter(i=>n.indexOf(i)!==-1),a={...e,...r};for(const i of o){const l=PD(e[i],r[i]);if(!l.valid)return{valid:!1,mergeErrorPath:[i,...l.mergeErrorPath]};a[i]=l.data}return{valid:!0,data:a}}if(Array.isArray(e)&&Array.isArray(r)){if(e.length!==r.length)return{valid:!1,mergeErrorPath:[]};const n=[];for(let o=0;o<e.length;o++){const a=e[o],i=r[o],l=PD(a,i);if(!l.valid)return{valid:!1,mergeErrorPath:[o,...l.mergeErrorPath]};n.push(l.data)}return{valid:!0,data:n}}return{valid:!1,mergeErrorPath:[]}}function Ope(e,r,n){if(r.issues.length&&e.issues.push(...r.issues),n.issues.length&&e.issues.push(...n.issues),Cv(e))return e;const o=PD(r.value,n.value);if(!o.valid)throw new Error(`Unmergable intersection. Error path: ${JSON.stringify(o.mergeErrorPath)}`);return e.value=o.data,e}const v0t=Te("$ZodEnum",(e,r)=>{an.init(e,r);const n=V1t(r.entries);e._zod.values=new Set(n),e._zod.pattern=new RegExp(`^(${n.filter(o=>U1t.has(typeof o)).map(o=>typeof o=="string"?Ev(o):o.toString()).join("|")})$`),e._zod.parse=(o,a)=>{const i=o.value;return e._zod.values.has(i)||o.issues.push({code:"invalid_value",values:n,input:i,inst:e}),o}}),b0t=Te("$ZodLiteral",(e,r)=>{an.init(e,r),e._zod.values=new Set(r.values),e._zod.pattern=new RegExp(`^(${r.values.map(n=>typeof n=="string"?Ev(n):n?n.toString():String(n)).join("|")})$`),e._zod.parse=(n,o)=>{const a=n.value;return e._zod.values.has(a)||n.issues.push({code:"invalid_value",values:r.values,input:a,inst:e}),n}}),Lpe=Te("$ZodTransform",(e,r)=>{an.init(e,r),e._zod.parse=(n,o)=>{const a=r.transform(n.value,n
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
:host {
display: block;
position: relative;
background-color: transparent;
width: 100%;
height: 100%;
box-sizing: border-box;
overflow: hidden;
border: 0px solid transparent;
padding: 0;
}`;r!==this.lastHostCss&&(this.hostCss?.replaceSync(r),this.lastHostCss=r)}connectedCallback(){this.lastHostCss="",this.hostCss=new CSSStyleSheet,this.updateHostCss(),this.shadow.adoptedStyleSheets=[this.hostCss],this.render()}disconnectedCallback(){this.root?.unmount(),this.root=void 0,this.shadow.adoptedStyleSheets.length=0,this.hostCss=void 0}static observedAttributes=["view-id","browser","dynamic-variant"];getProps(){const r=Ebt.safeParse({viewId:this.getAttribute("view-id"),browser:this.getAttribute("browser")??void 0,dynamicViewVariant:this.getAttribute("dynamic-variant")??void 0});return r.success?r.data:(console.error("Invalid props",$pe(r.error)),{viewId:"index"})}render(){const r=this.getProps();this.updateHostCss(),this.root??=net.createRoot(this.shadow),this.root.render(y.jsx(QJe,{...r}))}attributeChangedCallback(r){this.root&&this.render()}}return customElements.define(oet.View,lhe),Y6.LikeC4View=lhe,Object.defineProperty(Y6,Symbol.toStringTag,{value:"Module"}),Y6})({});
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
/* prettier-ignore-end */