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

406 lines
3 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 Lme(e,r){for(var n=0;n<r.length;n++){const o=r[n];if(typeof o!="string"&&!Array.isArray(o)){for(const i in o)if(i!=="default"&&!(i in e)){const a=Object.getOwnPropertyDescriptor(o,i);a&&Object.defineProperty(e,i,a.get?a:{enumerable:!0,get:()=>o[i]})}}}return Object.freeze(Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}))}function LM(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var X6={exports:{}},Xm={};var FM;function Fme(){if(FM)return Xm;FM=1;var e=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function n(o,i,a){var l=null;if(a!==void 0&&(l=""+a),i.key!==void 0&&(l=""+i.key),"key"in i){a={};for(var s in i)s!=="key"&&(a[s]=i[s])}else a=i;return i=a.ref,{$$typeof:e,type:o,key:l,ref:i!==void 0?i:null,props:a}}return Xm.Fragment=r,Xm.jsx=n,Xm.jsxs=n,Xm}var VM;function Vme(){return VM||(VM=1,X6.exports=Fme()),X6.exports}var y=Vme(),K6={exports:{}},$t={};var qM;function qme(){if(qM)return $t;qM=1;var e=Symbol.for("react.transitional.element"),r=Symbol.for("react.portal"),n=Symbol.for("react.fragment"),o=Symbol.for("react.strict_mode"),i=Symbol.for("react.profiler"),a=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 m(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,K,O){this.props=Y,this.context=K,this.refs=x,this.updater=O||v}k.prototype.isReactComponent={},k.prototype.setState=function(Y,K){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,K,"setState")},k.prototype.forceUpdate=function(Y){this.updater.enqueueForceUpdate(this,Y,"forceUpdate")};function C(){}C.prototype=k.prototype;function _(Y,K,O){this.props=Y,this.context=K,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,K,O){var W=O.ref;return{$$typeof:e,type:Y,key:K,ref:W!==void 0?W:null,props:O}}function I(Y,K){return j(Y.type,K,Y.props)}function N(Y){return typeof Y=="object"&&Y!==null&&Y.$$typeof===e}function L(Y){var K={"=":"=0",":":"=2"};return"$"+Y.replace(/[=:]/g,function(O){return K[O]})}var H=/\/+/g;function P(Y,K){return typeof Y=="object"&&Y!==null&&Y.key!=null?L(""+Y.key):K.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(K){Y.status==="pending"&&(Y.status="fulfilled",Y.value=K)},function(K){Y.status==="pending"&&(Y.status="rejected",Y.reason=K)})),Y.status){case"fulfilled":return Y.value;case"rejected":throw Y.reason}}throw Y}function B(Y,K,O,W,Z){var Q=typeof Y;(Q==="undefined"||Q==="boolean")&&(Y=null);var ie=!1;if(Y===null)ie=!0;else switch(Q){case"bigint":case"string":case"number":ie=!0;break;case"object":switch(Y.$$typeof){case e:case r:ie=!0;break;case u:return ie=Y._init,B(ie(Y._payload),K,O,W,Z)}}if(ie)return Z=Z(Y),ie=W===""?"."+P(Y,0):W,R(Z)?(O="",ie!=null&&(O=ie.replace(H,"$&/")+"/"),B(Z,K,O,"",function(ue){return ue})):Z!=null&&(N(Z)&&(Z=I(Z,O+(Z.key==null||Y&&Y.key===Z.key?"":(""+Z.key).replace(H,"$&/")+"/")+ie)),K.push(Z)),1;ie=0;var te=W===""?".":W+":";if(R(Y))for(var re=0;re<Y.length;re++)W=Y[re],Q=te+P(W,re),ie+=B(W,K,O,Q,Z);else if(re=m(Y),typeof re=="function")for(Y=re.call(Y),re=0;!(W=Y.next()).done;)W=W.value,Q=te+P(W,re++),ie+=B(W,K,O,Q,Z);else if(Q==="object"){if(typeof Y.then=="function")return B(V(Y),K,O,W,Z);throw K=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 i=o.schema,a=i.space==="svg"?!1:o.settings.omitOptionalTags;let l=i.space==="svg"?o.settings.closeEmptyElements:o.settings.voids.includes(e.tagName.toLowerCase());const s=[];let c;i.space==="html"&&e.tagName==="svg"&&(o.schema=AB);const d=$ve(o,e.properties),u=o.all(i.space==="html"&&e.tagName==="template"?e.content:e);return o.schema=i,u&&(l=!1),(d||!a||!xve(e,r,n))&&(s.push("<",e.tagName,d?" "+d:""),l&&(i.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&&(!a||!V_(e,r,n))&&s.push("</"+e.tagName+">"),s.join("")}function $ve(e,r){const n=[];let o=-1,i;if(r){for(i in r)if(r[i]!==null&&r[i]!==void 0){const a=Rve(e,i,r[i]);a&&n.push(a)}}for(;++o<n.length;){const a=e.settings.tightAttributes?n[o].charAt(n[o].length-1):void 0;o!==n.length-1&&a!=='"'&&a!=="'"&&(n[o]+=" ")}return n.join("")}function Rve(e,r,n){const o=j0e(e.schema,r),i=e.settings.allowParseErrors&&e.schema.space==="html"?0:1,a=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[i][a]}));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[i][a]}))),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)[i][a],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=M0e("type",{invalid:Dve,unknown:Pve,handlers:{comment:tve,doctype:rve,element:Cve,raw:Tve,root:jve,text:VB}});function Dve(e){throw new Error("Expected node, not `"+e+"`")}function Pve(e){const r=e;throw new Error("Cannot compile unknown node `"+r.type+"`")}const Mve={},Nve={},Bve=[];function Ive(e,r){const n=r||Mve,o=n.quote||'"',i=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||Nve,closeSelfClosing:n.closeSelfClosing||!1,closeEmptyElements:n.closeEmptyElements||!1},schema:n.space==="svg"?AB:P0e,quote:o,alternative:i}.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(i){return Ive(i,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
`:" ")+a.indentLines(a.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 i=n.createTracker(o),a=n.enter("strikethrough");let l=i.move("~~");return l+=n.containerPhrasing(e,{...i.current(),before:l,after:"~"}),l+=i.move("~~"),a(),l}function Dbe(){return"~"}function Pbe(e){return e.length}function Mbe(e,r){const n=r||{},o=(n.align||[]).concat(),i=n.stringLength||Pbe,a=[],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=Nbe(e[u][k]);if(n.alignDelimiters!==!1){const _=i(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;)a[p]=XB(o[p]);else{const w=XB(o);for(;++p<d;)a[p]=w}p=-1;const f=[],m=[];for(;++p<d;){const w=a[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),m[p]=C),f[p]=_}l.splice(1,0,f),s.splice(1,0,m),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=a[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 Nbe(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 i=n.enter("blockquote"),a=n.createTracker(o);a.move("> "),a.shift(2);const l=n.indentLines(n.containerFlow(e,a.current()),Ibe);return i(),l}function Ibe(e,r,n){return">"+(n?"":" ")+e}function Obe(e,r){return KB(e,r.inConstruct,!0)&&!KB(e,r.notInConstruct,!1)}function KB(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 ZB(e,r,n,o){let i=-1;for(;++i<n.unsafe.length;)if(n.unsafe[i].character===`
`&&Obe(n.stack,n.unsafe[i]))return/[ \t]/.test(o.before)?"":" ";return`\\
`}function Lbe(e,r){const n=String(e);let o=n.indexOf(r),i=o,a=0,l=0;if(typeof r!="string")throw new TypeError("Expected substring");for(;o!==-1;)o===i?++a>l&&(l=a):a=1,i=o+r.length,o=n.indexOf(r,i);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 i=Vbe(n),a=e.value||"",l=i==="`"?"GraveAccent":"Tilde";if(Fbe(e,n)){const p=n.enter("codeIndented"),f=n.indentLines(a,Hbe);return p(),f}const s=n.createTracker(o),c=i.repeat(Math.max(Lbe(a,i)+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(`
`),a&&(u+=s.move(a+`
`)),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 i=X_(n),a=i==='"'?"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${a}`),d+=c.move(" "+i),d+=c.move(n.safe(e.title,{before:d,after:i,...c.current()})),d+=c.move(i),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)||Nu(e))return 1;if(Lb(e))return 2}function qb(e,r,n){const o=Fh(e),i=Fh(r);return o===void 0?i===void 0?n==="_"?{inside:!0,outside:!0}:{inside:!1,outside:!1}:i===1?{inside:!0,outside:!0}:{inside:!1,outside:!0}:o===1?i===void 0?{inside:!1,outside:!1}:i===1?{inside:!0,outside:!0}:{inside:!1,outside:!1}:i===void 0?{inside:!1,outside:!1}:i===1?{inside:!0,outside:!1}:{inside:!1,outside:!1}}QB.peek=Gbe;function QB(e,r,n,o){const i=Wbe(n),a=n.enter("emphasis"),l=n.createTracker(o),s=l.move(i);let c=l.move(n.containerPhrasing(e,{after:i,before:s,...l.current()}));const d=c.charCodeAt(0),u=qb(o.before.charCodeAt(o.before.length-1),d,i);u.inside&&(c=l1(d)+c.slice(1));const p=c.charCodeAt(c.length-1),f=qb(o.after.charCodeAt(0),p,i);f.inside&&(c=c.slice(0,-1)+l1(p));const m=l.move(i);return a(),n.attentionEncodeSurroundingInfo={after:f.outside,before:u.outside},s+c+m}function Gbe(e,r,n){return n.options.emphasis||"*"}function K_(e,r,n,o){let i,a,l;typeof r=="function"&&typeof n!="function"?(a=void 0,l=r,i=n):(a=r,l=n,i=o),HB(e,a,s,i);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,i=typeof n.includeHtml=="boolean"?n.includeHtml:!0;return JB(e,o,i)}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 i=-1;for(;++i<e.length;)o[i]=JB(e[i],r,n);return o.join("")}function Xbe(e){return!!(e&&typeof e=="object")}function Kbe(e,r){let n=!1;return K_(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 Zbe(e,r,n,o){const i=Math.max(Math.min(6,e.depth||1),1),a=n.createTracker(o);if(Kbe(e,n)){const u=n.enter("headingSetext"),p=n.enter("phrasing"),f=n.containerPhrasing(e,{...a.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+`
`+(i===1?"=":"-").repeat(f.length-(Math.max(f.lastIndexOf("\r"),f.lastIndexOf(`
`))+1))}const l="#".repeat(i),s=n.enter("headingAtx"),c=n.enter("phrasing");a.move(l+" ");let d=n.containerPhrasing(e,{before:"# ",after:`
`,...a.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 i=X_(n),a=i==='"'?"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${a}`),d+=c.move(" "+i),d+=c.move(n.safe(e.title,{before:d,after:i,...c.current()})),d+=c.move(i),s()),d+=c.move(")"),l(),d}function Jbe(){return"!"}nI.peek=exe;function nI(e,r,n,o){const i=e.referenceType,a=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,a(),i==="full"||!d||d!==p?c+=s.move(p+"]"):i==="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||"",i="`",a=-1;for(;new RegExp("(^|[^`])"+i+"([^`]|$)").test(o);)i+="`";for(/[^ \r\n]/.test(o)&&(/^[ \r\n]/.test(o)&&/[ \r\n]$/.test(o)||/^`|`$/.test(o))&&(o=" "+o+" ");++a<n.unsafe.length;){const l=n.unsafe[a],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 i+o+i}function txe(){return"`"}function iI(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))}aI.peek=rxe;function aI(e,r,n,o){const i=X_(n),a=i==='"'?"Quote":"Apostrophe",l=n.createTracker(o);let s,c;if(iI(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${a}`),d+=l.move(" "+i),d+=l.move(n.safe(e.title,{before:d,after:i,...l.current()})),d+=l.move(i),c()),d+=l.move(")"),s(),d}function rxe(e,r,n){return iI(e,n)?"<":"["}lI.peek=nxe;function lI(e,r,n,o){const i=e.referenceType,a=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,a(),i==="full"||!d||d!==p?c+=s.move(p+"]"):i==="shortcut"?c=c.slice(0,-1):c+=s.move("]"),c}function nxe(){return"["}function Z_(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=Z_(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 ixe(e){const r=e.options.bulletOrdered||".";if(r!=="."
`,Nfr:"𝔑",NoBreak:"",NonBreakingSpace:" ",Nopf:"",Not:"⫬",NotCongruent:"≢",NotCupCap:"≭",NotDoubleVerticalBar:"∦",NotElement:"∉",NotEqual:"≠",NotEqualTilde:"≂̸",NotExists:"∄",NotGreater:"≯",NotGreaterEqual:"≱",NotGreaterFullEqual:"≧̸",NotGreaterGreater:"≫̸",NotGreaterLess:"≹",NotGreaterSlantEqual:"⩾̸",NotGreaterTilde:"≵",NotHumpDownHump:"≎̸",NotHumpEqual:"≏̸",NotLeftTriangle:"⋪",NotLeftTriangleBar:"⧏̸",NotLeftTriangleEqual:"⋬",NotLess:"≮",NotLessEqual:"≰",NotLessGreater:"≸",NotLessLess:"≪̸",NotLessSlantEqual:"⩽̸",NotLessTilde:"≴",NotNestedGreaterGreater:"⪢̸",NotNestedLessLess:"⪡̸",NotPrecedes:"⊀",NotPrecedesEqual:"⪯̸",NotPrecedesSlantEqual:"⋠",NotReverseElement:"∌",NotRightTriangle:"⋫",NotRightTriangleBar:"⧐̸",NotRightTriangleEqual:"⋭",NotSquareSubset:"⊏̸",NotSquareSubsetEqual:"⋢",NotSquareSuperset:"⊐̸",NotSquareSupersetEqual:"⋣",NotSubset:"⊂⃒",NotSubsetEqual:"⊈",NotSucceeds:"⊁",NotSucceedsEqual:"⪰̸",NotSucceedsSlantEqual:"⋡",NotSucceedsTilde:"≿̸",NotSuperset:"⊃⃒",NotSupersetEqual:"⊉",NotTilde:"≁",NotTildeEqual:"≄",NotTildeFullEqual:"≇",NotTildeTilde:"≉",NotVerticalBar:"∤",Nscr:"𝒩",Ntilde:"Ñ",Nu:"Ν",OElig:"Œ",Oacute:"Ó",Ocirc:"Ô",Ocy:"О",Odblac:"Ő",Ofr:"𝔒",Ograve:"Ò",Omacr:"Ō",Omega:"Ω",Omicron:"Ο",Oopf:"𝕆",OpenCurlyDoubleQuote:"“",OpenCurlyQuote:"",Or:"⩔",Oscr:"𝒪",Oslash:"Ø",Otilde:"Õ",Otimes:"⨷",Ouml:"Ö",OverBar:"‾",OverBrace:"⏞",OverBracket:"⎴",OverParenthesis:"⏜",PartialD:"∂",Pcy:"П",Pfr:"𝔓",Phi:"Φ",Pi:"Π",PlusMinus:"±",Poincareplane:"",Popf:"",Pr:"⪻",Precedes:"≺",PrecedesEqual:"⪯",PrecedesSlantEqual:"≼",PrecedesTilde:"≾",Prime:"″",Product:"∏",Proportion:"∷",Proportional:"∝",Pscr:"𝒫",Psi:"Ψ",QUOT:'"',Qfr:"𝔔",Qopf:"",Qscr:"𝒬",RBarr:"⤐",REG:"®",Racute:"Ŕ",Rang:"⟫",Rarr:"↠",Rarrtl:"⤖",Rcaron:"Ř",Rcedil:"Ŗ",Rcy:"Р",Re:"",ReverseElement:"∋",ReverseEquilibrium:"⇋",ReverseUpEquilibrium:"⥯",Rfr:"",Rho:"Ρ",RightAngleBracket:"⟩",RightArrow:"→",RightArrowBar:"⇥",RightArrowLeftArrow:"⇄",RightCeiling:"⌉",RightDoubleBracket:"⟧",RightDownTeeVector:"⥝",RightDownVector:"⇂",RightDownVectorBar:"⥕",RightFloor:"⌋",RightTee:"⊢",RightTeeArrow:"↦",RightTeeVector:"⥛",RightTriangle:"⊳",RightTriangleBar:"⧐",RightTriangleEqual:"⊵",RightUpDownVector:"⥏",RightUpTeeVector:"⥜",RightUpVector:"↾",RightUpVectorBar:"⥔",RightVector:"⇀",RightVectorBar:"⥓",Rightarrow:"⇒",Ropf:"",RoundImplies:"⥰",Rrightarrow:"⇛",Rscr:"",Rsh:"↱",RuleDelayed:"⧴",SHCHcy:"Щ",SHcy:"Ш",SOFTcy:"Ь",Sacute:"Ś",Sc:"⪼",Scaron:"Š",Scedil:"Ş",Scirc:"Ŝ",Scy:"С",Sfr:"𝔖",ShortDownArrow:"↓",ShortLeftArrow:"←",ShortRightArrow:"→",ShortUpArrow:"↑",Sigma:"Σ",SmallCircle:"∘",Sopf:"𝕊",Sqrt:"√",Square:"□",SquareIntersection:"⊓",SquareSubset:"⊏",SquareSubsetEqual:"⊑",SquareSuperset:"⊐",SquareSupersetEqual:"⊒",SquareUnion:"⊔",Sscr:"𝒮",Star:"⋆",Sub:"⋐",Subset:"⋐",SubsetEqual:"⊆",Succeeds:"≻",SucceedsEqual:"⪰",SucceedsSlantEqual:"≽",SucceedsTilde:"≿",SuchThat:"∋",Sum:"∑",Sup:"⋑",Superset:"⊃",SupersetEqual:"⊇",Supset:"⋑",THORN:"Þ",TRADE:"™",TSHcy:"Ћ",TScy:"Ц",Tab:" ",Tau:"Τ",Tcaron:"Ť",Tcedil:"Ţ",Tcy:"Т",Tfr:"𝔗",Therefore:"∴",Theta:"Θ",ThickSpace:"",ThinSpace:"",Tilde:"",TildeEqual:"≃",TildeFullEqual:"≅",TildeTilde:"≈",Topf:"𝕋",TripleDot:"⃛",Tscr:"𝒯",Tstrok:"Ŧ",Uacute:"Ú",Uarr:"↟",Uarrocir:"⥉",Ubrcy:"Ў",Ubreve:"Ŭ",Ucirc:"Û",Ucy:"У",Udblac:"Ű",Ufr:"𝔘",Ugrave:"Ù",Umacr:"Ū",UnderBar:"_",UnderBrace:"⏟",UnderBracket:"⎵",UnderParenthesis:"⏝",Union:"",UnionPlus:"⊎",Uogon:"Ų",Uopf:"𝕌",UpArrow:"↑",UpArrowBar:"⤒",UpArrowDownArrow:"⇅",UpDownArrow:"↕",UpEquilibrium:"⥮",UpTee:"⊥",UpTeeArrow:"↥",Uparrow:"⇑",Updownarrow:"⇕",UpperLeftArrow:"↖",UpperRightArrow:"↗",Upsi:"ϒ",Upsilon:"Υ",Uring:"Ů",Uscr:"𝒰",Utilde:"Ũ",Uuml:"Ü",VDash:"⊫",Vbar
`,inConstruct:"tableCell"},{atBreak:!0,character:"|",after:"[ :-]"},{character:"|",inConstruct:"tableCell"},{atBreak:!0,character:":",after:"-"},{atBreak:!0,character:"-",after:"[:|-]"}],handlers:{inlineCode:f,table:l,tableCell:c,tableRow:s}};function l(m,v,w,x){return d(u(m,w,x),m.align)}function s(m,v,w,x){const k=p(m,w,x),C=d([k]);return C.slice(0,C.indexOf(`
`))}function c(m,v,w,x){const k=w.enter("tableCell"),C=w.enter("phrasing"),_=w.containerPhrasing(m,{...x,before:a,after:a});return C(),k(),_}function d(m,v){return Mbe(m,{align:v,alignDelimiters:o,padding:n,stringLength:i})}function u(m,v,w){const x=m.children;let k=-1;const C=[],_=v.enter("table");for(;++k<x.length;)C[k]=p(x[k],v,w);return _(),C}function p(m,v,w){const x=m.children;let k=-1;const C=[],_=v.enter("tableRow");for(;++k<x.length;)C[k]=c(x[k],m,v,w);return _(),C}function f(m,v,w){let x=dI.inlineCode(m,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 i=r.children;let a=-1,l;for(;++a<i.length;){const s=i[a];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 i=e.children[0],a=typeof e.checked=="boolean"&&i&&i.type==="paragraph",l="["+(e.checked?"x":" ")+"] ",s=n.createTracker(o);a&&s.move(l);let c=dI.listItem(e,r,n,{...o,...s.current()});return a&&(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:[ibe(),Cbe(e),Tbe(),$xe(e),zxe()]}}function xi(e,r,n,o){const i=e.length;let a=0,l;if(r<0?r=-r>i?0:i+r:r=r>i?i: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);a<o.length;)l=o.slice(a,a+1e4),l.unshift(r,0),e.splice(...l),a+=1e4,r+=1e4}function Qi(e,r){return e.length>0?(xi(e,e.length,0,r),e):r}const gI={}.hasOwnProperty;function mI(e){const r={};let n=-1;for(;++n<e.length;)Pxe(r,e[n]);return r}function Pxe(e,r){let n;for(n in r){const i=(gI.call(e,n)?e[n]:void 0)||(e[n]={}),a=r[n];let l;if(a)for(l in a){gI.call(i,l)||(i[l]=[]);const s=a[l];Mxe(i[l],Array.isArray(s)?s:s?[s]:[])}}}function Mxe(e,r){let n=-1;const o=[];for(;++n<r.length;)(r[n].add==="after"?e:o).push(r[n]);xi(e,0,0,o)}const Nxe={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 i,a;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)?(a=!0,e.consume(p),c):u(p)}function d(p){return e.consume(p),i=!0,c}function u(p){return a&&i&&Bo(o.previous)?(e.exit("literalAutolinkEmail"),e.exit("literalAutolink"),r(p)):n(p)}}function Lxe(e,r,n){const o=this;return i;function i(l){return l!==87&&l!==119||!kI.call(o,o.previous)||t8(o.events)?n(l):(e.enter("literalAutolink"),e.enter("literalAutolinkWww"),e.check(Nxe,e.attempt(yI,e.attempt(vI,a),n),n)(l))}function a(l){return e.exit("literalAutolinkWww"),e.exit("literalAutolink"),r(l)}}function Fxe(e,r,n){const o=this;let i="",a=!1;return l;function l(p){return(p===72||p===104)&&_I.call(o,o.previous)&&!t8(o.events)?(e.enter("literalAutolink"),e.enter(
`)&&(u.children[0]={type:"text",value:f.replace(m,"").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:[P3e(l),{type:"text",value:s.replace(/^\//,"")}],data:{hProperties:{className:"markdown-alert-title",dir:"auto"}}})),o.children=[...d]})};function P3e(e){let r=M3e[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 M3e={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"},N3e={tokenize:B3e};function B3e(e){const r=e.attempt(this.parser.constructs.contentInitial,o,i);let n;return r;function o(s){if(s===null){e.consume(s);return}return e.enter("lineEnding"),e.consume(s),e.exit("lineEnding"),Zt(e,r,"linePrefix")}function i(s){return e.enter("paragraph"),a(s)}function a(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 mt(s)?(e.consume(s),e.exit("chunkText"),a):(e.consume(s),l)}}const I3e={tokenize:O3e},II={tokenize:L3e};function O3e(e){const r=this,n=[];let o=0,i,a,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,i&&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 xi(r.events,R+1,0,r.events.slice($)),r.events.length=A,d(_)}return s(_)}function d(_){if(o===n.length){if(!i)return f(_);if(i.currentConstruct&&i.currentConstruct.concrete)return v(_);r.interrupt=!!(i.currentConstruct&&!i._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&&i)continue;l=" ";break}default:l=String.fromCharCode(a)}i=a===-2,o.push(l)}return o.join("")}function Z3e(e){const o={constructs:mI([G3e,...(e||{}).extensions||[]]),content:i(N3e),defined:[],document:i(I3e),flow:i(F3e),lazy:{},string:i(H3e),text:i(U3e)};return o;function i(a){return l;function l(s){return Y3e(o,a,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 i;function i(a,l,s){const c=[];let d,u,p,f,m;for(a=r+(typeof a=="string"?a.toString():new TextDecoder(l||void 0).decode(a)),p=0,r="",n&&(a.charCodeAt(0)===65279&&p++,n=void 0);p<a.length;){if(FI.lastIndex=p,d=FI.exec(a),f=d&&d.index!==void 0?d.index:a.length,m=a.charCodeAt(f),!d){r=a.slice(p);break}if(m===10&&p===f&&o)c.push(-3),o=void 0;else switch(o&&(c.push(-5),o=void 0),p<f&&(c.push(a.slice(p,f)),e+=f-p),m){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?a8(e):""}function a8(e){return qI(e&&e.line)+":"+qI(e&&e.column)}function VI(e){return a8(e&&e.start)+"-"+a8(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(Z3e(n).document().write(J3e()(e,r,!0))))}function e2e(e){const r={transforms:[],canContainEols:["emphasis","fragment","heading","paragraph","strong"],enter:{autolink:a(Le),autolinkProtocol:j,autolinkEmail:j,atxHeading:a(je),blockQuote:a(ue),characterEscape:j,characterReference:j,codeFenced:a(_e),codeFencedFenceInfo:l,codeFencedFenceMeta:l,codeIndented:a(_e,l),codeText:a(ce,l),codeTextData:j,data:j,codeFlowValue:j,definition:a(pe),definitionDestinationString:l,definitionLabelString:l,definitionTitleString:l,emphasis:a(xe),hardBreakEscape:a(Be),hardBreakTrailing:a(Be),htmlFlow:a(Je,l),htmlFlowData:j,htmlText:a(Je,l),htmlTextData:j,image:a(st),label:l,link:a(Le),listItem:a(Ve),listItemValue:f,listOrdered:a(St,p),listUnordered:a(St),paragraph:a(qe),reference:O,referenceString:l,resourceDestinationString:l,resourceTitleString:l,setextHeading:a(je),strong:a(Xe),thematicBreak:a(Et)},exit:{atxHeading:c(),atxHeadingSequence:R,autolink:c(),autolinkEmail:re,autolinkProtocol:te,blockQuote:c(),characterEscapeValue:I,characterReferenceMarkerHexadecimal:Z,characterReferenceMarkerNumeric:Z,characterReferenceValue:Q,characterReference:ie,codeFenced:c(x),codeFencedFence:w,codeFencedFenceInfo:m,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(P),htmlTextData:I,image:c(F),label:G,labelText:q,lineEnding:N,link:c(B),listItem:c(),listOrdered:c(),listUnordered:c(),paragraph:c(),referenceString:W,resourceDestinationString:U,resourceTitleString:Y,resource:K,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=i(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 i2e(e,r){const n=r.value?r.value+`
`:"",o={};r.lang&&(o.className=["language-"+r.lang]);let i={type:"element",tagName:"code",properties:o,children:[{type:"text",value:n}]};return r.meta&&(i.data={meta:r.meta}),e.patch(r,i),i=e.applyData(r,i),i={type:"element",tagName:"pre",properties:{},children:[i]},e.patch(r,i),i}function a2e(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(),i=Vh(o.toLowerCase()),a=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=a+1,s+=1,e.footnoteCounts.set(o,s);const c={type:"element",tagName:"a",properties:{href:"#"+n+"fn-"+i,id:n+"fnref-"+i+(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 i=e.all(r),a=i[0];a&&a.type==="text"?a.value="["+a.value:i.unshift({type:"text",value:"["});const l=i[i.length-1];return l&&l.type==="text"?l.value+=o:i.push({type:"text",value:o}),i}function u2e(e,r){const n=String(r.identifier).toUpperCase(),o=e.definitionById.get(n);if(!o)return YI(e,r);const i={src:Vh(o.url||""),alt:r.alt};o.title!==null&&o.title!==void 0&&(i.title=o.title);const a={type:"element",tagName:"img",properties:i,children:[]};return e.patch(r,a),e.applyData(r,a)}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 i={href:Vh(o.url||"")};o.title!==null&&o.title!==void 0&&(i.title=o.title);const a={type:"element",tagName:"a",properties:i,children:e.all(r)};return e.patch(r,a),e.applyData(r,a)}function g2e(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 m2e(e,r,n){const o=e.all(r),i=n?y2e(n):XI(r),a={},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:[]}),a.className=["task-list-item"]}let s=-1;for(;++s<o.length;){const u=o[s];(i||s!==0||u.type!=="element"||u.tagName!=="p")&&l.push({type:"text",value:`
`}),u.type==="element"&&u.tagName==="p"&&!i?l.push(...u.children):l.push(u)}const c=o[o.length-1];c&&(i||c.type!=="element"||c.tagName!=="p")&&l.push({type:"text",value:`
`});const d={type:"element",tagName:"li",properties:a,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 i=-1;for(typeof r.start=="number"&&r.start!==1&&(n.start=r.start);++i<o.length;){const l=o[i];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 a={type:"element",tagName:r.ordered?"ol":"ul",properties:n,children:e.wrap(o,!0)};return e.patch(r,a),e.applyData(r,a)}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(),i=[];if(o){const l={type:"element",tagName:"thead",properties:{},children:e.wrap([o],!0)};e.patch(r.children[0],l),i.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}),i.push(l)}const a={type:"element",tagName:"table",properties:{},children:e.wrap(i,!0)};return e.patch(r,a),e.applyData(r,a)}function _2e(e,r,n){const o=n?n.children:void 0,a=(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={},m=l?l[c]:void 0;m&&(f.align=m);let v={type:"element",tagName:a,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 KI=9,ZI=32;function E2e(e){const r=String(e),n=/\r?\n|\r/g;let o=n.exec(r),i=0;const a=[];for(;o;)a.push(QI(r.slice(i,o.index),i>0,!0),o[0]),i=o.index+o[0].length,o=n.exec(r);return a.push(QI(r.slice(i),i>0,!1)),a.join("")}function QI(e,r,n){let o=0,i=e.length;if(r){let a=e.codePointAt(o);for(;a===KI||a===ZI;)o++,a=e.codePointAt(o)}if(n){let a=e.codePointAt(i-1);for(;a===KI||a===ZI;)i--,a=e.codePointAt(i-1)}return i>o?e.slice(o,i):""}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:i2e,delete:a2e,emphasis:l2e,footnoteReference:s2e,heading:c2e,html:d2e,imageReference:u2e,image:p2e,inlineCode:h2e,linkReference:f2e,link:g2e,listItem:m2e,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,i=e.options.footnoteLabel||"Footnotes",a=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 m=0;const v=[],w=e.footnoteCounts.get(p);for(;w!==void 0&&++m<=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,i=new Map,a=new Map,l={...R2e,...n.handlers},s={all:d,applyData:M2e,definitionById:o,footnoteById:i,footnoteCounts:a,footnoteOrder:[],handlers:l,one:c,options:n,patch:P2e,wrap:B2e};return K_(e,function(u){if(u.type==="definition"||u.type==="footnoteDefinition"){const p=u.type==="definition"?o:i,f=String(u.identifier).toUpperCase();p.has(f)||p.set(f,u)}}),s;function c(u,p){const f=u.type,m=s.handlers[f];if(l8.call(s.handlers,f)&&m)return m(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||N2e)(s,u,p)}function d(u){const p=[];if("children"in u){const f=u.children;let m=-1;for(;++m<f.length;){const v=s.one(f[m],u);if(v){if(m&&f[m-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 P2e(e,r){e.position&&(r.position=mB(e))}function M2e(e,r){let n=r;if(e&&e.data){const o=e.data.hName,i=e.data.hChildren,a=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"&&a&&Object.assign(n.properties,o1(a)),"children"in n&&n.children&&i!==null&&i!==void 0&&(n.children=i)}return n}function N2e(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),i=j2e(n),a=Array.isArray(o)?{type:"root",children:o}:o||{type:"root",children:[]};return i&&a.children.push({type:"text",value:`
`},i),a}function I2e(e,r){return e&&"run"in e?async function(n,o){const i=eO(n,{file:o,...r});await e.run(i,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,i=function(d){return typeof Array.isArray=="function"?Array.isArray(d):r.call(d)==="[object Array]"},a=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,m,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&&(a(f)||(m=i(f)))?(m?(m=!1,v=p&&i(p)?p:[]):v=p&&a(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=Qm(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(...i){let a=-1;const l=i.pop();if(typeof l!="function")throw new TypeError("Expected function as last argument, not "+l);s(null,...i);function s(c,...d){const u=e[++a];let p=-1;if(c){l(c);return}for(;++p<i.length;)(d[p]===null||d[p]===void 0)&&(d[p]=i[p]);i=d,u?V2e(u,s)(...d):l(null,...d)}}function o(i){if(typeof i!="function")throw new TypeError("Expected `middelware` to be a function, not "+i);return e.push(i),r}}function V2e(e,r){let n;return o;function o(...l){const s=e.length>l.length;let c;s&&l.push(i);try{c=e.apply(this,l)}catch(d){const u=d;if(s&&n)throw u;return i(u)}s||(c&&c.then&&typeof c.then=="function"?c.then(a,i):c instanceof Error?i(c):a(c))}function i(l,...s){n||(n=!0,r(l,...s))}function a(l){i(null,l)}}class ti extends Error{constructor(r,n,o){super(),typeof n=="string"&&(o=n,n=void 0);let i="",a={},l=!1;if(n&&("line"in n&&"column"in n?a={place:n}:"start"in n&&"end"in n?a={place:n}:"type"in n?a={ancestors:[n],place:n.position}:a={...n}),typeof r=="string"?i=r:!a.cause&&r&&(l=!0,i=r.message,a.cause=r),!a.ruleId&&!a.source&&typeof o=="string"){const c=o.indexOf(":");c===-1?a.ruleId=o:(a.source=o.slice(0,c),a.ruleId=o.slice(c+1))}if(!a.place&&a.ancestors&&a.ancestors){const c=a.ancestors[a.ancestors.length-1];c&&(a.place=c.position)}const s=a.place&&"start"in a.place?a.place.start:a.place;this.ancestors=a.ancestors||void 0,this.cause=a.cause||void 0,this.column=s?s.column:void 0,this.fatal=void 0,this.file,this.message=i,this.line=s?s.line:void 0,this.name=u1(a.place)||"1:1",this.place=a.place||void 0,this.reason=this.message,this.ruleId=a.ruleId||void 0,this.source=a.source||void 0,this.stack=l&&a.cause&&typeof a.cause.stack=="string"?a.cause.stack:"",this.actual,this.expected,this.note,this.url}}ti.prototype.file="",ti.prototype.name="",ti.prototype.reason="",ti.prototype.message="",ti.prototype.stack="",ti.prototype.column=void 0,ti.prototype.line=void 0,ti.prototype.ancestors=void 0,ti.prototype.cause=void 0,ti.prototype.fatal=void 0,ti.prototype.place=void 0,ti.prototype.ruleId=void 0,ti.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,i=e.length,a;if(r===void 0||r.length===0||r.length>e.length){for(;i--;)if(e.codePointAt(i)===47){if(a){n=i+1;break}}else o<0&&(a=!0,o=i+1);return o<0?"":e.s
`)}reversed(r=!1){if(!r)return new ea(this.target,this.source);const[n]=t7(this.target,this.source,"directed");return n??new ea(this.target,this.source,new Set)}}function q5e(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 H5e(...e){return ao(U5e,e)}const U5e=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 ao(Object.values,e)}class gx{constructor(r,n){this.$model=r,this.$element=n,this.id=this.$element.id,this._literalId=this.$element.id;const[o,i]=y5e(this.id);o?(this.imported={from:o,fqn:i},this.hierarchyLevel=Tb(i)):(this.imported=null,this.hierarchyLevel=Tb(this.id))}Aux;id;_literalId;hierarchyLevel;imported;get name(){return Jm(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 ar(this,Symbol.for("tags"),()=>Zb([...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 ar(this,Symbol.for("defaultView"),()=>g1(this.scopedViews())??null)}get isRoot(){return this.parent===null}get style(){return ar(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 ar(this,Symbol.for("allOutgoing"),()=>new Set(this.outgoing()))}get allIncoming(){return ar(this,Symbol.for("allIncoming"),()=>new Set(this.incoming()))}views(){return ar(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 ar(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 Ji(g1(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,_i="/",r7=e=>{if(He(!e.includes(`
`),"View title cannot contain newlines"),e.includes(_i)){const r=e.split(_i).map(n=>n.trim()).filter(n=>n.length>0);return Ll(r,1)?r:[""]}return[e.trim()]},mx=e=>r7(e).join(_i),W5e=e=>{const r=r7(e);return Ll(r,2)?r.slice(0,-1).join(_i):null},n7=e=>e.includes(_i)?r7(e).pop()??e:e.trim();class G5e{constructor(r){this.$model=r;const n=this.$deployments=r.$data.deployments,o=fx(n.elements);for(const i of Jc(o)){const a=this.addElement(i);for(const l of a.tags)this.#c.get(l).add(a);a.isInstance()&&this.#r.get(a.element.id).add(a)}for(const i of fx(n.relations)){const a=this.addRelation(i);for(const l of a.tags)this.#c.get(l).add(a)}}#e=new Map;#a=new Map;#t=new Ln(()=>new Set);#r=new Ln(()=>new Set);#l=new Set;#n=new Map;#s=new Ln(()=>new Set);#i=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 gt(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 $5e(this.#d,`${n}@${o}`,()=>new O5e(this.instance(n),this.$model.element(o)))}return this.element(r.deployment)}relationships(){return this.#n.values()}relationship(r){const n=yr(r);return gt(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.#a.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 i of o)i.id!==n&&(yield i)}*ancestors(r){let n=yr(r),o;for(;o=this.#a.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 i of this.#s.get(o))switch(!0){case n==="all":case(n==="direct"&&i.target.id===o):case(n==="to-descendants"&&i.target.id!==o):yield i;break}}*outgoing(r,n="all"){const o=yr(r);for(const i of this.#i.get(o))switch(!0){case n==="all":case(n==="direct"&&i.source.id===o):case(n==="from-descendants"&&i.source.id!==o):yield i;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.#a.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 L5e(this,Object.freeze(r));this.#n.set(n.id,n),this.#s.get(n.target.id).add(n),this.#i.get(n.source.id).add(n);const o=n.boundary?.id??null;if(o)for(const i of[o,...Du(o)])this.#o.get(i).add(n);for(const i of Du(n.source.id)){if(i===o)break;this.#i.get(i).add(n)}for(const i of Du(n.target.id)){if(i===o)break;this.#s.get(i).add(n)}return n}}class iL{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=m=>{if(i.current=m.ctrlKey||m.metaKey||m.shiftKey||m.altKey,(!i.current||i.current&&!d)&&NF(m))return!1;const v=jV(m.code,s);if(a.current.add(m[v]),TV(l,a.current,!1)){const w=m.composedPath?.()?.[0]||m.target,x=w?.nodeName==="BUTTON"||w?.nodeName==="A";r.preventDefault!==!1&&(i.current||!x)&&m.preventDefault(),o(!0)}},p=m=>{const v=jV(m.code,s);TV(l,a.current,!0)?(o(!1),a.current.clear()):a.current.delete(m[v]),m.key==="Meta"&&a.current.clear(),i.current=!1},f=()=>{a.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(i=>r.has(i)))}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,i,a],panZoom:l}=e.getState();return l?(await l.setViewport({x:r.x??o,y:r.y??i,zoom:r.zoom??a},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:i,minZoom:a,maxZoom:l,panZoom:s}=e.getState(),c=Ws(r,o,i,a,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:i,snapToGrid:a,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??i,p=n.snapToGrid??a;return G1(d,o,p,u)},flowToScreenPosition:r=>{const{transform:n,domNode:o}=e.getState();if(!o)return r;const{x:i,y:a}=o.getBoundingClientRect(),l=Yx(r,n);return{x:l.x+i,y:l.y+a}}}),[])};function AV(e,r){const n=[],o=new Map,i=[];for(const a of e)if(a.type==="add"){i.push(a);continue}else if(a.type==="remove"||a.type==="replace")o.set(a.id,[a]);else{const l=o.get(a.id);l?l.push(a):o.set(a.id,[a])}for(const a of r){const l=o.get(a.id);if(!l){n.push(a);continue}if(l[0].type==="remove")continue;if(l[0].type==="replace"){n.push({...l[0].item});continue}const s={...a};for(const c of l)cSe(c,s);n.push(s)}return i.length&&i.forEach(a=>{a.index!==void 0?n.splice(a.index,0,{...a.item}):n.push({...a.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[i,a]of e){const l=r.has(i);!(a.selected===void 0&&!l)&&a.selected!==l&&(n&&(a.selected=l),o.push(Qu(a.id,l)))}return o}function DV({items:e=[],lookup:r}){const n=[],o=new Map(e.map(i=>[i.id,i]));for(const[i,a]of e.entries()){const l=r.get(a.id),s=l?.internals?.userNode??l;s!==void 0&&s!==a&&n.push({id:a.id,item:a,type:"replace"}),s===void 0&&n.push({item:a,type:"add",index:i})
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:i=void 0,children:a,color:l,minWidth:s=10,minHeight:c=10,maxWidth:d=Number.MAX_VALUE,maxHeight:u=Number.MAX_VALUE,keepAspectRatio:p=!1,resizeDirection:f,autoScale:m=!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&&m),[T,m]),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:N,transform:L,snapGrid:H,snapToGrid:P,nodeOrigin:V,domNode:B}=$.getState();return{nodeLookup:N,transform:L,snapGrid:H,snapToGrid:P,nodeOrigin:V,paneDomNode:B}},onChange:(N,L)=>{const{triggerNodeChanges:H,nodeLookup:P,parentLookup:V,nodeOrigin:B}=$.getState(),F=[],q={x:N.x,y:N.y},G=P.get(_);if(G&&G.expandParent&&G.parentId){const U=G.origin??B,Y=N.width??G.measured.width??0,K=N.height??G.measured.height??0,O={id:G.id,parentId:G.parentId,rect:{width:Y,height:K,...DF({x:N.x??G.position.x,y:N.y??G.position.y},{width:Y,height:K},G.parentId,P,U)}},W=q7([O],P,V,B);F.push(...W),q.x=N.x?Math.max(U[0]*Y,N.x):void 0,q.y=N.y?Math.max(U[1]*K,N.y):void 0}if(q.x!==void 0&&q.y!==void 0){const U={id:_,type:"position",position:{...q}};F.push(U)}if(N.width!==void 0&&N.height!==void 0){const U={id:_,type:"dimensions",resizing:!0,setAttributes:f?f==="horizontal"?"width":"height":!0,dimensions:{width:N.width,height:N.height}};F.push(U)}for(const U of L){const Y={...U,type:"position"};F.push(Y)}H(F)},onEnd:({width:N,height:L})=>{const H={id:_,type:"dimensions",resizing:!1,dimensions:{width:N,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:{...i,scale:A,...l&&{[T?"backgroundColor":"borderColor"]:l}},children:a})}S.memo(tCe);const rCe=e=>e.domNode?.querySelector(".react-flow__renderer");function nCe({children:e}){const r=Dt(rCe);return r?Va.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,iCe=(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},aCe=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:i,position:a=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,iCe),{x:f,y:m,zoom:v,selectedNodesCount:w}=Dt(aCe,jr);if(!(typeof i=="boolean"?i: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:m,zoom:v},a,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,i){return e(n,o,i)&&r(n,o,i)}}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(i,`px;
padding-top: `).concat(a,`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,i=o===void 0?"margin":o;xRe();var a=S.useMemo(function(){return yRe(i)},[i]);return S.createElement(vRe,{styles:bRe(a,!r,i,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 gf=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 i=tH(e,o);if(i){var a=rH(e,o),l=a[1],s=a[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,i){var a=$Re(e,window.getComputedStyle(r).direction),l=a*o,s=n.target,c=r.contains(s),d=!1,u=l>0,p=0,f=0;do{if(!s)break;var m=rH(e,s),v=m[0],w=m[1],x=m[2],k=w-x-a*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,mf=[];function ARe(e){var r=S.useRef([]),n=S.useRef([0,0]),o=S.useRef(),i=S.useState(jRe++)[0],a=S.useState(Zq)[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(i));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(i))}),function(){document.body.classList.remove("block-interactivity-".concat(i)),w.forEach(function(x){return x.classList.remove("allow-interactivity-".concat(i))})}}},[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(!(!mf.length||mf[mf.length-1]!==a)){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 mf.push(a),e.setCallbacks({onScrollCapture:p,onWheelCapture:p,onTouchMoveCapture:f}),document.addEventListener("wheel",c,gf),document.addEventListener("touchmove",c,gf),document.addEventListener("touchstart",u,gf),function(){mf=mf.filter(function(w){return w!==a}),document.removeEventListener("wheel",c,gf),document.removeEventListener("touchmove",c,gf),document.removeEventListener("touchstart",u,gf)}},[]);var m=e.removeScrollBar,v=e.inert;return S.createElement(S.Fragment,null,v?S.createElement(a,{styles:TRe(i)}):null,m?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 PRe=sRe(Kq,ARe);var ny=S.forwardRef(function(e,r){return S.createElement(ww,Yl({},e,{ref:r,sideCar:PRe}))});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(i=>{p9(o[i])&&i in e?n[i]=h9(n[i],o[i]):n[i]=o[i]}),n}function MRe(e){return e.replace(/[A-Z]/g,r=>`-${r.toLowerCase()}`)}function NRe(e){return typeof e!="string"||!e.includes("var(--mantine-scale)")?e:e.match(/^calc\((.*?)\)$/)?.[1].split("*")[0].trim()}function f9(e){const r=NRe(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 iH(e){return e==="0rem"?"0rem":`calc(${e} * var(--mantine-scale))`}function aH(e,{shouldScale:r=!1}={}){function n(o){if(o===0||o==="0")return`0${e}`;if(typeof o=="number"){const i=`${o/16}${e}`;return r?iH(i):i}if(typeof o=="string"){if(o===""||o.startsWith("calc(")||o.startsWith("clamp(")||o.includes("rgba("))return o;if(o.includes(","))return o.split(",").map(a=>n(a)).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 Mw({theme:e,color:r,colorScheme:n,name:o=r,withColorValues:i=!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 i?{[`--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 a=ly(e,"dark"),l={[`--mantine-color-${o}-text`]:`var(--mantine-color-${o}-4)`,[`--mantine-color-${o}-filled`]:`var(--mantine-color-${o}-${a})`,[`--mantine-color-${o}-filled-hover`]:`var(--mantine-color-${o}-${a===9?8:a+1})`,[`--mantine-color-${o}-light`]:_f(e.colors[r][Math.max(0,a-2)],.15),[`--mantine-color-${o}-light-hover`]:_f(e.colors[r][Math.max(0,a-2)],.2),[`--mantine-color-${o}-light-color`]:`var(--mantine-color-${o}-${Math.max(a-5,0)})`,[`--mantine-color-${o}-outline`]:`var(--mantine-color-${o}-${Math.max(a-4,0)})`,[`--mantine-color-${o}-outline-hover`]:_f(e.colors[r][Math.max(a-4,0)],.05)};return i?{[`--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(!vMe.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 xMe(e,r){return!e||tp(e)?"":Jr(uw(e),Pq(([n,o])=>[`:is(${r} [data-likec4-tag="${n}"]) {`,bMe(o),"}"]),Lq(`
`))}function wMe({children:e,rootSelector:r}){const n=yMe().tags,o=xMe(n,r);return y.jsxs(AG.Provider,{value:n,children:[o!==""&&y.jsx(kMe,{stylesheet:o}),e]})}const kMe=S.memo(({stylesheet:e})=>{const r=np()?.();return y.jsx("style",{"data-likec4-tags":!0,type:"text/css",dangerouslySetInnerHTML:{__html:e},nonce:r})});function _Me(e){return S.useContext(AG)[e]??{color:"tomato"}}function DG(){return oa().replace("mantine-","likec4-")}var SMe="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
${a.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"?P3(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 i of Hf(o))n(i)}}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 P3(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 i=n.shift();if(!i.length)break;o=Uf(o,i)}return o}function M3(e,r){if(typeof r=="string"){const i=e.states[r];if(!i)throw new Error(`State '${r}' does not exist on '${e.id}'`);return[e,i]}const n=Object.keys(r),o=n.map(i=>Uf(e,i)).filter(Boolean);return[e.machine.root,e].concat(o,n.reduce((i,a)=>{const l=Uf(e,a);if(!l)return i;const s=M3(l,r[a]);return i.concat(s)},[]))}function fNe(e,r,n,o){const i=Uf(e,r).next(n,o);return!i||!i.length?e.next(n,o):i}function gNe(e,r,n,o){const i=Object.keys(r),a=Uf(e,i[0]),l=sE(a,r[i[0]],n,o);return!l||!l.length?e.next(n,o):l}function mNe(e,r,n,o){const i=[];for(const a of Object.keys(r)){const l=r[a];if(!l)continue;const s=Uf(e,a),c=sE(s,l,n,o);c&&i.push(...c)}return i.length?i:e.next(n,o)}function sE(e,r,n,o){return typeof r=="string"?fNe(e,r,n,o):Object.keys(r).length===1?gNe(e,r,n,o):mNe(e,r,n,o)}function yNe(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 vNe(e,r){const n=new Set(e),o=new Set(r);for(const i of n)if(o.has(i))return!0;for(const i of o)if(n.has(i))return!0;return!1}function hY(e,r,n){const o=new Set;for(const i of e){let a=!1;const l=new Set;for(const s of o)if(vNe(dE([i],r,n),dE([s],r,n)))if(Cd(i.source,s.source))l.add(s);else{a=!0;break}if(!a){for(const s of l)o.delete(s);o.add(i)}}return Array.from(o)}function bNe(e){const[r,...n]=e;for(const o of Ry(r,void 0))if(n.every(i=>Cd(i,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 i of r[o.id])n.add(i);else for(const i of cE(dY(o),r))n.add(i);else n.add(o);return[...n]}function fY(e,r){const n=cE(e,r);if(!n)return;if(!e.reenter&&n.every(i=>i===e.source||Cd(i,e.source)))return e.source;const o=bNe(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 i of e)if(i.target?.length){const a=fY(i,n);i.reenter&&i.source===a&&o.add(a);for(const l of r)Cd(l,a)&&o.add(l)}return[...o]}function xNe(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,i,a){if(!e.length)return r;const l=new Set(r._nodes);let s=r.historyValue;const c=hY(e,l,s);let d=r;i||([d,s]=SNe(d,o,n,c,l,s,a,n.actionExecutor)),d=Gf(d,o,n,c.flatMap(p=>p.actions),a,void 0),d=kNe(d,o,n,c,l,a,s,i);const u=[...l];d.status==="done"&&(d=Gf(d,o,n,u.sort((p,f)=>f.order-p.order).flatMap(p=>p.exit),a,void 0));try{return s===r.historyValue&&xNe(r._nodes,l)?d:vp(d,{_nodes:u,historyValue:s})}catch(p){throw p}}function wNe(e,r,n,o,i){if(o.output===void 0)return;const a=eE(i.id,i.output!==void 0&&i.parent?rE(i.output,e.context,r,n.self):void 0);return rE(o.output,e.context,a,n.self)}function kNe(e,r,n,o,i,a,l,s){let c=e;const d=new Set,u=new Set;_Ne(o,l,u,d),s&&u.add(e.machine.root);const p=new Set;for(const f of[...d].sort((m,v)=>m.order-v.order)){i.add(f);const m=[];m.push(...f.entry);for(const v of f.invoke)m.push(T3(v.src,{...v,syncSnapshot:!!v.onSnapshot}));if(u.has(f)){const v=f.initial.actions;m.
${p.message}`)}if(u){i.push(...s.actions),a=s;break}}return a?[a]: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 i=r[o];if(i.states)for(const a of i.events)n.add(`${a}`)}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 FNe="#";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:i,delays:a}=this.implementations;return new fE(this.config,{actions:{...n,...r.actions},guards:{...o,...r.guards},actors:{...i,...r.actors},delays:{...a,...r.delays}})}resolveState(r){const n=$Ne(this.root,r.value),o=A3(M3(this.root,n));return N3({_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:i}=this.config,a=N3({context:typeof i!="function"&&i?i:{},_nodes:[this.root],children:{},status:"active"},this);return typeof i=="function"?Gf(a,n,r,[Bt(({spawn:l,event:s,self:c})=>i({spawn:l,input:s.input,self:c}))],o,void 0):a}getInitialSnapshot(r,n){const o=QG(n),i=[],a=this.getPreInitialState(r,o,i),l=uE([{target:[...pY(this.root)],source:this.root,reenter:!0,actions:[],eventType:null,toJSON:null}],a,r,o,!0,i),{snapshot:s}=hE(l,o,r,i);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),i=D3(n[0])?n[0].slice(FNe.length):n[0],a=this.idMap.get(i);if(!a)throw new Error(`Child state node '#${i}' does not exist on machine '${this.id}'`);return P3(a,o)}get definition(){return this.root.definition}toJSON(){return this.definition}getPersistedSnapshot(r,n){return MNe(r,n)}restoreSnapshot(r,n){const o={},i=r.children;Object.keys(i).forEach(p=>{const f=i[p],m=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:m,src:v,systemId:f.systemId});o[p]=x});function a(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 m={};for(const v in f){const w=f[v];for(const x of w){const k=a(p,x);k&&(m[v]??=[],m[v].push(k))}}return m}const s=l(this.root,r.historyValue),c=N3({...r,children:o,_nodes:Array.from(A3(M3(this.root,r.value))),historyValue:s},this),d=new Set;function u(p,f){if(!d.has(p)){d.add(p);for(const m in p){const v=p[m];if(v&&typeof v=="object"){if("xstate$$type"in v&&v.xstate$$type===iE){p[m]=f[v.id];continue}u(v,f)}}}}return u(c.context,o),c}}function VNe(e,r,n,o,{event:i}){const a=typeof i=="function"?i(n,o):i;return[r,{event:a},void 0]}function qNe(e,{event:r}){e.defer(()=>e.emit(r))}function gE(e){function r(n,o){}return r.type="xstate.emit",r.event=e,r.resolve=VNe,r.execute=qNe,r}let mE=(function(e){return e.Parent="#_parent",e.Internal="#_internal",e})({});function HNe(e,r,n,o,{to:i,event:a,id:l,delay:s},c){const d=r.machine.implementations.delays;if(typeof a=="string")throw
[data-motion-pop-id="${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
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:a,sizeRef:l,children:S.cloneElement(e,{ref:c})})}const eLe=({children:e,initial:r,isPresent:n,onExitComplete:o,custom:i,presenceAffectsLayout:a,mode:l,anchorX:s,root:c})=>{const d=ag(tLe),u=S.useId();let p=!0,f=S.useMemo(()=>(p=!1,{id:u,initial:r,isPresent:n,custom:i,onExitComplete:m=>{d.set(m,!0);for(const v of d.values())if(!v)return;o&&o()},register:m=>(d.set(m,!1),()=>d.delete(m))}),[n,d,o]);return a&&p&&(f={...f}),S.useMemo(()=>{d.forEach((m,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(Z3.Provider,{value:f,children:e})};function tLe(){return new Map}function SK(e=!0){const r=S.useContext(Z3);if(r===null)return[!0,null];const{isPresent:n,onExitComplete:o,register:i}=r,a=S.useId();S.useEffect(()=>{if(e)return i(a)},[e]);const l=S.useCallback(()=>e&&o&&o(a),[a,o,e]);return!n&&o?[!1,l]:[!0]}const Q3=e=>e.key||"";function EK(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:i=!0,mode:a="sync",propagate:l=!1,anchorX:s="left",root:c})=>{const[d,u]=SK(l),p=S.useMemo(()=>EK(e),[e]),f=l&&!d?[]:p.map(Q3),m=S.useRef(!0),v=S.useRef(p),w=ag(()=>new Map),[x,k]=S.useState(p),[C,_]=S.useState(p);EC(()=>{m.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 a==="wait"&&$.length&&(T=$),_(EK(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(N=>{N||(I=!1)}),I&&(R?.(),_(v.current),l&&u?.(),o&&o())};return y.jsx(eLe,{isPresent:z,initial:!m.current||n?void 0:!1,custom:r,presenceAffectsLayout:i,mode:a,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 iLe=e=>!e.isLayoutDirty&&e.willUpdate(!1);function aLe(){const e=new Set,r=new WeakMap,n=()=>e.forEach(iLe);return{add:o=>{e.add(o),r.set(o,o.addEventListener("willUpdate",n))},remove:o=>{e.delete(o);const i=r.get(o);i&&(i(),r.delete(o)),n()},dirty:n}}const CK=e=>e===!0,lLe=e=>CK(e===!0)||e==="id",lg=({children:e,id:r,inherit:n=!0})=>{const o=S.useContext(Hy),i=S.useContext(rLe),[a,l]=oLe(),s=S.useRef(null),c=o.id||i;s.current===null&&(lLe(n)&&c&&(r=r?c+"-"+r:c),s.current={id:r,group:CK(n)&&o.group||aLe()});const d=S.useMemo(()=>({...s.current,forceRender:a}),[l]);return y.jsx(Hy.Provider,{value:d,children:e})},CC=S.createContext({strict:!1});function $C(e){for(const r in e)og[r]={...og[r],...e[r]}}function sLe({children:e,features:r,strict:n=!1}){const[,o]=S.useState(!RC(r)),i=S.useRef(void 0);if(!RC(r)){const{renderer:a,...l}=r;i.current=a,$C(l)}return S.useEffect(()=>{RC(r)&&r().then(({renderer:a,...l})=>{$C(l),i.current=a,o(!0)})},[]),y.jsx(CC.Provider,{value:{renderer:i.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"}),KVe=fe({display:"block",fontFamily:"likec4.element",fontOpticalSizing:"auto",fontStyle:"normal",fontWeight:600,fontSize:"24px",lineHeight:"xs"}),i$="40px",ZVe=fe({flex:`0 0 ${i$}`,height:i$,width:i$,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",g2="--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",[g2]:"{colors.mantine.colors.dark[1]}",[f2]:"{colors.mantine.colors.defaultColor}"},_dark:{background:"mantine.colors.dark[6]"},_light:{[g2]:"{colors.mantine.colors.gray[6]}",[f2]:"{colors.mantine.colors.gray[7]}",_hover:{[g2]:"{colors.mantine.colors.gray[7]}"}},"& .mantine-ThemeIcon-root":{transition:"fast",color:`[var(${g2}, {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"}),iqe=fe({justifySelf:"end",textAlign:"right",userSelect:"none"}),aqe=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"}]],a$=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),i=S.useRef(null);return S.useEffect(()=>{i.current&&o(i.current.scrollWidth>i.current.clientWidth)},[e]),y.jsx(_n,{label:n&&!r?e:null,multiline:!0,w:300,withinPortal:!0,children:y.jsx(it,{ref:i,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(it,{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(it,{classN
`)?r.split(`
`).map(l=>l.trim()).filter(Boolean):[r],o=n.length>1,[i,a]=S.useState(!1);return y.jsxs(y.Fragment,{children:[o?y.jsx(pr,{onClick:()=>{a(!i)},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(it,{component:"span",size:"xs",fw:700,children:[e,":"]}),y.jsx(it,{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}),i?y.jsx(a$,{size:12}):y.jsx(Dd,{size:12})]})}):y.jsxs(it,{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:i}):y.jsx(Se,{className:fe({minHeight:"32px",display:"flex",alignItems:"center"}),children:y.jsx(hQ,{value:n[0]||"",isExpanded:i})})})]})}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}})),gqe=[["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",gqe),mqe=[["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",mqe),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"}]],ba=wt("outline","zoom-scan","ZoomScan",vqe),bqe=({node:e})=>y.jsxs(en,{className:hqe,gap:6,align:"baseline",wrap:"nowrap",children:[y.jsxs(it,{component:"div",fz:11,c:"dimmed",children:[e.kind,":"]}),y.jsx(it,{component:"div",fz:"sm",fw:"500",children:e.title})]}),xqe=({instance:e})=>{const r=Mt(),n=r.currentView.id,o=[...e.views()];return y.jsxs(en,{className:fqe,gap:4,children:[y.jsx(Ti,{color:"gray",variant:"transparent",size:"xs",flex:0,children:y.jsx(yqe,{stroke:1.2})}),y.jsx(it,{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?
a ${i},${a} 0,0,0 ${-e} 0
2025-12-16 12:13:34 +01:00
l 0,${l}
a ${i},${a} 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:a,rx:i}}function PJ(e,r,n=.185){const o=r,i=Math.round(o/2),a=Pd(o/2*n),l=e-2*a;return{path:`
M ${a},0
a ${a},${i} 0,0,0 0 ${o}
2025-12-16 12:13:34 +01:00
l ${l},0
a ${a},${i} 0,0,0 0 ${-o}
z`.replace(/\s+/g," ").trim(),ry:i,rx:a}}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 MJ({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:i,ry:a}=PJ(r,n);return y.jsxs(y.Fragment,{children:[y.jsx("path",{d:o,strokeWidth:2}),y.jsx("ellipse",{cx:i,cy:a,ry:a-.75,rx:i,"data-likec4-fill":"mix-stroke",strokeWidth:2})]})}case"storage":case"cylinder":{const{path:o,rx:i,ry:a}=DJ(r,n);return y.jsxs(y.Fragment,{children:[y.jsx("path",{d:o,strokeWidth:2}),y.jsx("ellipse",{cx:i,cy:a,ry:a,rx:i-.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:PJ(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:GZ({shapetype:"html"}),children:[e&&y.jsx("div",{className:"likec4-shape-multiple"}),r&&y.jsx("div",{className:"likec4-shape-outline"})]})}function pg({data:e,width:r,height:n,showSeletionOutline:o=!0}){let i=r&&r>10?r:e.width,a=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=GZ({shapetype:"svg"});return y.jsxs(y.Fragment,{children:[l&&y.jsx("svg",{className:s,"data-likec4-shape-multiple":"true",viewBox:`0 0 ${i} ${a}`,children:y.jsx(MJ,{shape:e.shape,w:i,h:a})}),y.jsxs("svg",{className:s,viewBox:`0 0 ${i} ${a}`,children:[o&&y.jsx(JHe,{shape:e.shape,w:i,h:a}),y.jsx(MJ,{shape:e.shape,w:i,h:a})]})]})}const zp=S.forwardRef(({value:e,textScale:r=1,uselikec4palette:n=!1,hideIfEmpty:o=!1,emptyText:i="no content",className:a,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(it,{component:"span",fz:"xs",c:"dimmed",style:{userSelect:"none"},children:i})};return y.jsx(hr,{ref:d,...c,className:Ge(bVe({uselikec4palette:n,value:e.isMarkdown?"markdown":"plaintext"}),a),style:{...l,...s&&{"--text-fz":`var(--font-sizes-${s}, var(--font-sizes-md))`},...r!==1&&{"--mantine-scale":r}},...u})});zp.displayName="Markdown";const NJ=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},i)=>{const{size:a}=$b(r),l=a==="sm"||a==="xs";return y.jsx(it,{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 ui(J){const ee=Dl(J);for(const oe of ee)for(const ae of Ye(oe,J))ee.add(ae);return ee}function Dl(J){const ee=new Set;function oe(ae){if(!ee.has(ae)){if(ee.add(ae),ae.type==="compound")oe(ae.initial.target[0]);else if(ae.type==="parallel")for(const le of ke(ae))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 ae=J;for(;oe.length;){const le=oe.shift();if(!le.length)break;ae=Ao(ae,le)}return ae}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),ae=oe.map(le=>Ao(J,le)).filter(Boolean);return[J.machine.root,J].concat(ae,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,ae){const le=Ao(J,ee).next(oe,ae);return!le||!le.length?J.next(oe,ae):le}function Pl(J,ee,oe,ae){const le=Object.keys(ee),ve=Ao(J,le[0]),De=ks(ve,ee[le[0]],oe,ae);return!De||!De.length?J.next(oe,ae):De}function lh(J,ee,oe,ae){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,ae);rt&&le.push(...rt)}return le.length?le:J.next(oe,ae)}function ks(J,ee,oe,ae){return typeof ee=="string"?zc(J,ee,oe,ae):Object.keys(ee).length===1?Pl(J,ee,oe,ae):lh(J,ee,oe,ae)}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),ae=new Set(ee);for(const le of oe)if(ae.has(le))return!0;for(const le of ae)if(oe.has(le))return!0;return!1}function _s(J,ee,oe){const ae=new Set;for(const le of J){let ve=!1;const De=new Set;for(const Fe of ae)if(Tc(Mr([le],ee,oe),Mr([Fe],ee,oe)))if(Xo(le.source,Fe.source))De.add(Fe);else{ve=!0;break}if(!ve){for(const Fe of De)ae.delete(Fe);ae.add(le)}}return Array.from(ae)}function ru(J){const[ee,...oe]=J;for(const ae of Ye(ee,void 0))if(oe.every(le=>Xo(le,ae)))return ae}function Ss(J,ee){if(!J.target)return[];const oe=new Set;for(const ae of J.target)if(jo(ae))if(ee[ae.id])for(const le of ee[ae.id])oe.add(le);else for(const le of Ss(Yo(ae),ee))oe.add(le);else oe.add(ae);return[...oe]}function Ko(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 ae=ru(oe.concat(J.source));if(ae)return ae;if(!J.reenter)return J.source.machine.root}function Mr(J,ee,oe){const ae=new Set;for(const le of J)if(le.target?.length){const ve=Ko(le,oe);le.reenter&&le.source===ve&&ae.add(ve);for(const De of ee)Xo(De,ve)&&ae.add(De)}return[...ae]}function Pn(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,ae,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]=za(lt,ae,oe,rt,De,Fe,ve,oe.actionExecutor)),lt=ho(lt,ae,oe,rt.flatMap(Ke=>Ke.actions),ve,void 0),lt=jc(lt,ae,oe,rt,De,ve,Fe,le);const Ot=[...De];lt.status==="done"&&(lt=ho(lt,ae,oe,Ot.sort((Ke,Ze)=>Ze.order-Ke.order).flatMap(Ke=>Ke.exit),ve,void 0));try{return Fe===ee.historyValue&&Pn(ee._nodes,De)?lt:Gr(lt,{_nodes:Ot,historyValue:Fe})}catch(Ke){throw Ke}}function Ml(J,ee,oe,ae,le){if(ae.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(ae.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 iKe=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)"}),aKe=[["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"}]],lKe=wt("outline","help-circle","HelpCircle",aKe),sKe=[["path",{d:"M7 7l10 10",key:"svg-0"}],["path",{d:"M17 8l0 9l-9 0",key:"svg-1"}]],cKe=wt("outline","arrow-down-right","ArrowDownRight",sKe),dKe=({value:e})=>{const{title:r,color:n="primary",shape:o="rectangle"}=e,[i,a]=S.useState(null),l=Mt(),s=300,c=200;return y.jsx(b3,{shadow:"none",px:"xs",py:"sm",className:Ge(oKe),"data-likec4-color":n,onMouseEnter:()=>{a(null),l.highlightNotation(e)},onMouseLeave:()=>{a(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(pg,{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(iKe),onMouseEnter:()=>{a(d),l.highlightNotation(e,d)},onMouseLeave:()=>{a(null),l.highlightNotation(e)},opacity:Bq(i)&&i!==d?.25:1,children:d},d))}),y.jsx(it,{component:"div",fz:"sm",fw:500,lh:"1.25",style:{textWrap:"pretty"},children:r})]})]})})},uKe=e=>({id:e.view.id,notations:e.view.notation?.nodes??[]}),pKe=S.memo(()=>{const e=QC(s=>s.height),{id:r,notations:n}=pa(uKe),[o,i]=sze({key:"notation-webview-collapsed",defaultValue:!0}),a=n.length>0,l=bg();return y.jsxs(Cn,{children:[!a&&y.jsx(ga.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(Ti,{size:"lg",variant:"light",color:"orange",radius:"md",children:y.jsx(rte,{})})})},"empty"),a&&o&&y.jsx(ga.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:tKe,onClick:()=>i(!1),children:y.jsx(lKe,{stroke:1.5})})})},"collapsed"),a&&!o&&y.jsx(ga.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:rKe,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:()=>i(!0),children:y.jsx(cKe,{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:nKe,hidden:o,children:y.jsx(oi,{viewportProps:{style:{maxHeight:`min(40vh, ${Math.max(e-60,50)}px)`}},children:y.jsx(Lo,{gap:0,children:n.map((s,c)=>y.jsx(dKe,{value:s},c))})})})]})})},r)]})}),hKe=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(fKe,{style:{backgroundColor:o},onClick:i=>{i.stopPropagation(),n()},children:"Close compare"})})}),fKe=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: ${a(n.elements.fill)};
--likec4-palette-stroke: ${a(n.elements.stroke)};
}
${Mre} ${l} {
--likec4-palette-fill: ${i(n.elements.fill)};
--likec4-palette-stroke: ${i(n.elements.stroke)};
}
`.trim()};function FQe(e,r,n){const{elements:o,relationships:i}=n,a=`:where(${e} [data-likec4-color=${r}])`;return[`
${a} {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the 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: ${o.fill};
--likec4-palette-stroke: ${o.stroke};
--likec4-palette-hiContrast: ${o.hiContrast};
--likec4-palette-loContrast: ${o.loContrast};
--likec4-palette-relation-stroke: ${i.line};
--likec4-palette-relation-label: ${i.label};
--likec4-palette-relation-label-bg: ${i.labelBg};
--likec4-palette-relation-stroke-selected: ${Are(Dre(i.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
}
${Mre} ${a} {
--likec4-palette-relation-stroke-selected: ${Are(Dre(i.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(),i=VQe(r,o);return y.jsx("style",{type:"text/css","data-likec4-colors":e,dangerouslySetInnerHTML:{__html:i},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)||iJe(e,r)||aJe()},Yre=Wre((function(e){function r(){return e.exports=r=Object.assign||function(n){for(var o=1;o<arguments.length;o++){var i=arguments[o];for(var a in i)Object.prototype.hasOwnProperty.call(i,a)&&(n[a]=i[a])}return n},r.apply(this,arguments)}e.exports=r})),sJe=function(e,r){if(e==null)return{};var n,o,i={},a=Object.keys(e);for(o=0;o<a.length;o++)n=a[o],r.indexOf(n)>=0||(i[n]=e[n]);return i},Xre=function(e,r){if(e==null)return{};var n,o,i=sJe(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)n=a[o],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i},cJe=S.createContext(null);function Kre(e){var r=e.children,n=r===void 0?"":r,o=Xre(e,["children"]);return typeof n!="string"&&(n=KQe()),Zr.createElement("template",Yre({},o,{dangerouslySetInnerHTML:{__html:n}}))}function Zre(e){var r=e.root,n=e.children;return Va.createPortal(n===void 0?null:n,r)}function dJe(e){var r=S.forwardRef((function(n,o){var i,a,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,m=f!==void 0&&f,v=n.children,w=Xre(n,["mode","delegatesFocus","styleSheets","ssr","children"]),x=(a=S.useRef((i=o)&&i.current),S.useEffect((function(){i&&(i.current=a.current)}),[i]),a),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),m){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,N=j.styleSheets,L=j.root;switch(I.name){case"NotSupportedError":N.length>0&&(L.adoptedStyleSheets=N);break;default:throw I}})({error:z,styleSheets:p,root:_})}}),[o,x,p]),Zr.createElement(Zr.Fragment,null,Zr.createElement(e.tag,Yre({key:R,ref:x},w),(_||m)&&Zr.createElement(cJe.Provider,{value:_},m?Zr.createElement(Kre,{shadowroot:s,shadowrootmode:s},e.render({root:_,ssr:m,children:v})):Zr.createElement(Zre,{root:_},e.render({root:_,ssr:m,children:v})))))}));return r.propTypes={mode:gl.oneOf(["open","closed"]),delegatesFocus:gl.bool,styleSheets:gl.arrayOf(gl.instanceOf(globalThis.CSSStyleSheet)),ssr:gl.bool,children:gl.node},r}Kre.propTypes={children:gl.oneOfType([gl.string,gl.node])},Zre.propTypes={root:gl.object.isRequired,children:gl.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,i){var a=rJe(i,{separator:"-"}),l="".concat(r,"-").concat(a);return Ez.has(l)||Ez.set(l,dJe({tag:a,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,i=n>o;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;
overflow: hidden;
aspect-ratio: ${Math.ceil(n)} / ${Math.ceil(o)};
${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
max-width: min(100%, var(--likec4-view-max-width, ${Math.ceil(n)}px));
margin-left: auto;
margin-right: auto;`}
width: ${i?"100%":"auto"};
height: ${i?"auto":"100%"};
${i?"min-width: 80px;":"min-height: 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
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:i,keepAspectRatio:a=!1,...l},s)=>{const c=WQe(i),d=DG(),u=fJe(d,a),p=S.useRef(null),f=UQe(n,o),m=S.useCallback(()=>p.current??void 0,[p]),v=at(()=>{if(ra(o)){if(typeof o=="string")return o;if(typeof o=="function")return o()}return""});let w=ra(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,{...i&&{forceColorScheme:i},defaultColorScheme:c,getRootElement:m,...!!w&&{getStyleNonce:v},cssVariablesSelector:".likec4-shadow-root",theme:r,children:y.jsx(wz,{children:e})})})})]})});Qre.displayName="ShadowRoot";const gJe=fe({cursor:"pointer","--mantine-cursor-pointer":"pointer","& :where(.likec4-diagram, .likec4-compound-node, .likec4-element-node)":{cursor:"pointer"}});function mJe({viewId:e,className:r,pannable:n=!1,zoomable:o=!1,keepAspectRatio:i=!0,colorScheme:a,injectFontCss:l=!0,controls:s=!1,background:c="transparent",browser:d=!0,showNavigationButtons:u=!1,enableNotations:p,enableFocusMode:f=!1,enableDynamicViewWalkthrough:m=!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=mMe(),[N,L]=S.useState("manual"),[H,P]=S.useState(null),V=at(Q=>{Q&&Q!==H&&L("manual"),P(Q)}),B=at(()=>{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=N==="manual"?q?.$layouted:q?.$view,U=!!p&&(F.notation?.nodes?.length??0)>0,Y=(G?.notation?.nodes?.length??0)>0,K=d!==!1,O=Nq(d)?{}:d,W=kee(F,z.dynamicViewVariant),Z=j.current?{root:j.current}:void 0;return y.jsx(Qre,{ref:j,injectFontCss:l,theme:C,colorScheme:a,styleNonce:_,keepAspectRatio:i?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:m,showNavigationButtons:u,enableCompareWithLatest:!1,enableFocusMode:f,enableRelationshipDetails:w,enableElementDetails:v,enableRelationshipBrowser:x,enableElementTags:!1,controls:s,reduceGraphics:k,className:Ge("likec4-static-view",K&&gJe),enableSearch:!1,...K&&{onCanvasClick:B,onNodeClick:B},reactFlowProps:R,renderNodes:T,children:A,...z}),y.jsx(Cn,{...Z,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"},runtimeCluster:{style:{},technology:"Kubernetes",description:{txt:"Target cluster where applications are deployed"},title:"Kubernetes Cluster",kind:"system",id:"runtimeCluster"},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:"contai
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the 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"},"runtimeCluster.runningApplication":{style:{opacity:20},description:{txt:"Deployed workload"},title:"Running Application",kind:"container",id:"runtimeCluster.runningApplication"},"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_
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the 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
2025-12-19 15:42:26 +01:00
and security scanning`},technology:"Golang",tags:[],icon:"tech:go",color:"primary",shape:"rectangle",style:{opacity:20,size:"md"},deploymentRef:"local.gitea.forgejo",modelRef:"edp.forgejo",navigateTo:"forgejo",x: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","15ss7lz"],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
2025-12-19 15:42:26 +01:00
and security scanning`},tags:[],technology:"Golang",kind:"container",isCustomized:!0,navigateTo:"forgejo",x:48,y:553,width:340,height:180,labelBBox:{x:46,y:17,width:279,height:139}},{id:"edp.garm",parent:"edp",level:1,children:["edp.garm.garm","edp.garm.providerEdgeConnect"],inEdges:["step-01","step-06","step-08","step-16"],outEdges:["step-03","step-04","step-07","step-09","step-18","step-19"],title:"Garm Image",modelRef:"edp.garm",shape:"rectangle",color:"primary",icon:"tech:docker",style:{opacity:20,size:"md"},tags:[],kind:"container",depth:1,x:709,y:142,width:1090,height:404,labelBBox:{x:6,y:0,width:77,height:15}},{id:"edp.garm.garm",parent:"edp.garm",level:2,children:[],inEdges:["step-01","step-06","step-08","step-16"],outEdges:["step-02","step-07","step-09","step-17"],title:"Garm",modelRef:"edp.garm.garm",shape:"rectangle",color:"primary",icon:"tech:go",style:{opacity:15,size:"md"},description:{txt:"Provisions runners for Forgejo"},tags:[],kind:"component",x:749,y:316,width:325,height:180,labelBBox:{x:47,y:63,width:262,height:47}},{id:"edp.garm.providerEdgeConnect",parent:"edp.garm",level:2,children:[],inEdges:["step-02","step-17"],outEdges:["step-03","step-04","step-18","step-19"],title:"Garm Provider for EdgeConnect",modelRef:"edp.garm.providerEdgeConnect",shape:"rectangle",color:"primary",icon:"tech:go",style:{opacity:15,size:"md"},description:{txt:"Acts as abstraction layer for EdgeConnect"},tags:[],kind:"component",x:1349,y:203,width:409,height:180,labelBBox:{x:47,y:54,width:347,height:65}},{id:"edgeConnect",parent:null,level:0,children:[],inEdges:["step-03","step-04","step-18","step-19"],outEdges:["step-05"],title:"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
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:["yorv62"],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"}]},orchestration_workflow:{_type:"dynamic",tags:null,links:null,_stage:"layouted",sourcePath:"views/dynamic/orchestration/orchestration-workflow.c4",description:null,title:"Orchestration Workflow",id:"orchestration_workflow",variant:"diagram",autoLayout:{direction:"TB"},hash:"df518980b33cdcc56c4e56c7c6fe04f37b4e95bb",sequenceLayout:{actors:[{id:"developer",x:0,y:0,width:320,height:180,ports:[{id:"step-01_source",cx:160,cy:306,height:40,type:"source",position:"right"}]},{id:"edp.forgejo",x:380,y:0,width:340,height:180,ports:[{id:"step-01_target",cx:170,cy:306,height:24,type:"target",position:"left"},{id:"step-02_source",cx:170,cy:328,height:40,type:"source",position:"right"},{id:"step-03_source",cx:170,cy:421,height:40,type:"source",position:"right"}]},{id:"edp.forgejoActions",x:780,y:0,width:350,height:180,ports:[{id:"step-02_target",cx:175,cy:328,height:24,type:"target",position:"left"}]},{id:"edp.forgejogit",x:1190,y:0,width:320,height:180,ports:[{id:"step-03_target",cx:160,cy:421,height:24,type:"target",position:"left"},{id:"step-04_source",cx:160,cy:443,height:40,type:"source",position:"right"}]},{id:"edp.argoCD",x:1570,y:0,width:320,height:180,ports:[{id:"step-04_target",cx:160,cy:443,height:24,type:"target",position:"left"},{id:"step-05_source",cx:160,cy:465,height:40,type:"source",position:"right"}]},{id:"runtimeCluster",x:1950,y:0,width:320,height:180,ports:[{id:"step-05_target",cx:160,cy:465,height:24,type:"target",position:"left"},{id:"step-06_target",cx:160,cy:558,height:24,type:"target",position:"right"}]},{id:"terraform",x:2330,y:0,width:320,height:180,ports:[{id:"step-06_source",cx:160,cy:558,height:40,type:"source",position:"left"}]}],compounds:[],steps:[{id:"step-01",sourceHandle:"step-01_source",targetHandle:"step-01_target",la
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the 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:168,y:339,width:340,height:180,labelBBox:{x:46,y:17,width:278,height:139}},{id:"edp.forgejoActions",parent:null,level:0,children:[],inEdges:["step-02"],outEdges:[],title:"Forgejo Actions",modelRef:"edp.forgejoActions",shape:"rectangle",color:"primary",icon:"tech:go",style:{opacity:15,size:"md"},description:{txt:"Continuous Integration like Github Actions"},tags:[],technology:"Golang",kind:"component",x:0,y:678,width:350,height:180,labelBBox:{x:46,y:44,width:288,height:85}},{id:"edp.forgejogit",parent:null,level:0,children:[],inEdges:["step-03"],outEdges:["step-04"],title:"ForgejoGit",modelRef:"edp.forgejogit",shape:"rectangle",color:"primary",icon:"tech:git",style:{opacity:15,size:"md"},tags:[],kind:"component",x:460,y:678,width:320,height:180,labelBBox:{x:97,y:74,width:156,height:24}},{id:"edp.argoCD",parent:null,level:0,children:[],inEdges:["step-04"],outEdges:["step-05"],title:"ArgoCD",modelRef:"edp.argoCD",shape:"rectangle",color:"primary",style:{opacity:20,size:"md"},description:{txt:"GitOps Service"},tags:[],kind:"container",navigateTo:"argoCD",x:460,y:1016,width:320,height:180,labelBBox:{x:108,y:63,width:105,height:48}},{id:"runtimeCluster",parent:null,level:0,children:[],inEdges:["step-05","step-06"],outEdges:[],title:"Kubernetes Cluster",modelRef:"runtimeCluster",shape:"rectangle",color:"primary",style:{opacity:15,size:"md"},description:{txt:"Target cluster where applications are deployed"},tags:[],technology:"Kubernetes",kind:"system",x:460,y:1355,width:320,height:180,labelBBox:{x:35,y:44,width:250,height:86}},{id:"terraform",parent:null,level:0,children:[],inEdges:[],outEdges:["step-06"],title:"Terraform",modelRef:"terraform",shape:"rectangle",color:"primary",style:{opacity:15,size:"md"},description:{txt:"Infrastructure provisioning (IaC)"},tags:[],technology:"Terraform",kind:"component",x:460,y:1694,width:320,height:180,labelBBox:{x:53,y:53,width:214,height:67}}],edges:[{id:"step-01",source:"developer",target:"edp.forgejo",label:"defines & commits",points:[[338,180],[338,226],[338,281],[338,328]],labelBBox:{x:347,y:247,width:140,height:19},parent:null,relations:["14tsadm"],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@0"},{id:"step-02",source:"edp.forgejo",target:"edp.forgejoActions",label:"pipelines",points:[[295,519],[273,565],[245,621],[223,668]],labelBBox:{x:271,y:585,width:80,height:19},parent:null,relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@1"},{id:"step-03",source:"edp.forgejo",target:"edp.forgejogit",label:"git repository",points:[[413,519],[451,565],[499,622],[539,670]],labelBBox:{x:497,y:585,width:106,height:19},parent:null,relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@2"},{id:"step-04",source:"edp.forgejogit",target:"edp.argoCD",label:"sync trigger",points:[[620,858],[620,903],[620,959],[620,1006]],labelBBox:{x:629,y:924,width:98,height:19},parent:null,relations:["yorv62"],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@3"},{id:"step-05",source:"edp.argoCD",target:"runtimeCluster",label:"deploys",points:[[620,1196],[620,1242],[620,1298],[620,1345]],labelBBox:{x:629,y:1263,width:74,height:19},parent:null,relations:["1f6l7ms"],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@4"},{id:"step-06",source:"terraform",target:"runtimeCluster",label:"provisions",points:[[620,1546],[620,1593],[620,1649],[620,1694]],labelBBox:{x:629,y:1602,width:89,height:19},dir:"back",parent:null,relations:[],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@5"}]},application_deployment_flow:{_type:"dynamic",tags:null,links:null,_stage:"layouted",sourcePath:"views/edp/application-deployment-flow.c4",description:null,title:"Application Deployment Flow",id:"application_deployment_flow",variant:"diagram",autoLayout:{direction:"TB"},hash:"9401c5e464791c7578a947fb92e26f302d46d9f5",sequenceLayout:{actors:[{id:"developer",x:0,y:0,width:320,height:180,ports:[{id:"step-01_source",cx:160,cy:306,height:40,type:"sou
offering capabilities like
code version controling
collaboration and ticketing
and security scanning`},tags:[],technology:"Golang",kind:"container",navigateTo:"forgejo",x:682,y:0,width:340,height:180,labelBBox:{x:45,y:17,width:279,height:139}}],edges:[{id:"step-01",source:"developer",target:"edp.forgejogit",label:"git push",points:[[412,180],[412,226],[412,281],[412,328]],labelBBox:{x:421,y:247,width:75,height:19},parent:null,relations:["1k2mvqc","vxxbwa"],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@0"},{id:"step-02",source:"edp.forgejogit",target:"edp.forgejoActions",label:"triggers",points:[[353,519],[322,565],[285,622],[254,669]],labelBBox:{x:316,y:585,width:73,height:19},parent:null,relations:["1yai3r5"],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@1"},{id:"step-03",source:"edp.forgejoActions",target:"edp.imageregistry",label:"push image",points:[[189,858],[188,903],[188,959],[187,1006]],labelBBox:{x:197,y:924,width:98,height:19},parent:null,relations:["21d2gk"],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@2"},{id:"step-04",source:"edp.forgejogit",target:"edp.argoCD",label:"watches manifests",points:[[472,519],[504,565],[542,622],[574,669]],labelBBox:{x:542,y:585,width:141,height:19},parent:null,relations:["yorv62"],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@3"},{id:"step-05",source:"edp.argoCD",target:"runtimeCluster",label:"deploys",points:[[641,858],[642,903],[642,959],[643,1006]],labelBBox:{x:651,y:924,width:74,height:19},parent:null,relations:["1f6l7ms"],color:"gray",line:"dashed",head:"normal",tags:[],astPath:"/steps@4"}]},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:"61cc384ce5746ebd89897cb187c94a7d651e3960",bounds:{x:0,y:0,width:5177,height:1588},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:15,y:1360,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:102}},{id:"idpbuilder",parent:null,level:0,children:[],inEdges:[],outEdges:["1dvclx1","hjkafp"],title:"idpbuilder",modelRef:"idpbuilder",shape:"rectangle",color:"primary",icon:"tech:go",style:{opacity:25,size:"md"},description:{txt:"Bootstrap tool for initial platform provisioning"},tags:[],technology:"Golang",kind:"component",x:4411,y:69,width:335,height:180,labelBBox:{x:47,y:44,width:273,height:86}},{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 platform"},tags:[],kind:"actor",x:4857,y:69,width:320,height:180,labelBBox:{x:53,y:63,width:214,height:48}},{id:"edp",parent:null,level:0,children:["edp.argoCD","edp.forgejo","edp.api","edp.ui","edp.grafana","edp.keycloak","edp.forgejogit","edp.mailhog","edp.minio","edp.monitoring","edp.openbao","edp.testApp","edp.garm","edp.application","edp.loki","edp.pr
offering capabilities like
code version controling
collaboration and ticketing
and security scanning`},tags:[],technology:"Golang",kind:"container",navigateTo:"forgejo",x:2245,y:392,width:340,height:180,labelBBox:{x:46,y:17,width:278,height:139}},{id:"edp.api",parent:"edp",level:1,children:[],inEdges:["1y3lcyj"],outEdges:[],title:"API",modelRef:"edp.api",shape:"rectangle",color:"primary",icon:"tech:swagger",style:{opacity:25,size:"md"},description:{txt:"API for the EDP platform"},tags:[],kind:"container",x:3581,y:392,width:320,height:180,labelBBox:{x:62,y:63,width:226,height:48}},{id:"edp.ui",parent:"edp",level:1,children:[],inEdges:["170qzun"],outEdges:[],title:"Backstage",modelRef:"edp.ui",shape:"rectangle",color:"primary",style:{opacity:25,size:"md"},description:{txt:"Developer Portal"},tags:[],kind:"container",x:4011,y:392,width:320,height:180,labelBBox:{x:102,y:63,width:116,height:48}},{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:2695,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:3151,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:["1qfsohc","on1qgt"],title:"ForgejoGit",modelRef:"edp.forgejogit",shape:"rectangle",color:"primary",icon:"tech:git",style:{opacity:25,size:"md"},tags:[],kind:"component",x:1815,y:715,width:320,height:180,labelBBox:{x:97,y:74,width:156,height:24}},{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:415,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:845,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:1385,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:415,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:845,y:392,width:320,height:180,labelBBox:{x:50,y:63,width:220,height:48}},{id:"edp.garm",parent:"edp",level:1,children:[],inEdges:[],outEdges:[],title:"Garm Image",modelRef:"edp.garm",shape:"rectangle",color:"primary",icon:"tech:docker",style:{opacity:25,size:"md"},tags:[],kind:"container",x:1385,y:392,width:320,height:180,labelBBox:{x:89,y:74,width:173,height:24}},{id:"edp.application",parent:"edp",level:1,children:[],inEdges:[],outEdges:[],title:"application",modelRef:"edp.application",shape:"rectangle",color:"prim
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the 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
offering capabilities like
code version controling
collaboration and ticketing
and security scanning`},tags:[],technology:"Golang",kind:"container",navigateTo:"forgejo",x:478,y:332,width:340,height:180,labelBBox:{x:46,y:17,width:278,height:139}},{id:"edp.keycloak",parent:"edp",level:1,children:[],inEdges:[],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:928,y:332,width:320,height:180,labelBBox:{x:39,y:63,width:242,height:48}},{id:"edp.monitoring",parent:"edp",level:1,children:[],inEdges:[],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:928,y:633,width:320,height:180,labelBBox:{x:21,y:54,width:278,height:66}}],edges:[{id:"1dvclx1",source:"idpbuilder",target:"edp.argoCD",label:"installs",points:[[369,180],[339,224],[303,278],[273,324]],labelBBox:{x:326,y:240,width:47,height:18},parent:null,relations:["8fwa3r"],color:"gray",line:"dashed",head:"normal"},{id:"hjkafp",source:"idpbuilder",target:"edp.forgejo",label:"installs",points:[[487,180],[517,224],[553,278],[583,324]],labelBBox:{x:539,y:240,width:47,height:18},parent:null,relations:["1ai9t9i"],color:"gray",line:"dashed",head:"normal"}]},"application-transition":{_type:"element",tags:null,links:null,_stage:"layouted",sourcePath:"views/high-level-concept/application-transition.c4",description:null,title:"application-transistion",id:"application-transition",autoLayout:{direction:"LR",nodeSep:140,rankSep:180},hash:"273e521fc8ecb88776ebeada66d26bce21c3c2e5",bounds:{x:0,y:0,width:1297,height:857},nodes:[{id:"@gr1",parent:null,kind:"@group",title:"developer-scope",color:"green",shape:"rectangle",children:["@gr2","@gr3","developer","otherProductLifecycleRoles"],inEdges:[],outEdges:["17brhnu"],level:0,depth:3,tags:[],style:{border:"none",opacity:20},x:8,y:8,width:853,height:841,labelBBox:{x:6,y:0,width:114,height:15}},{id:"@gr2",parent:"@gr1",kind:"@group",title:"Devops inner-loop",color:"gray",shape:"rectangle",children:["localbox"],inEdges:["zjg544","6szgsj"],outEdges:["1uo6k6b"],level:0,depth:2,tags:[],style:{border:"none",opacity:30},x:373,y:459,width:448,height:350,labelBBox:{x:6,y:0,width:122,height:15}},{id:"@gr3",parent:"@gr1",kind:"@group",title:"Devops outer-loop",color:"gray",shape:"rectangle",children:["edp"],inEdges:["1okgiq5","1wupl5x","1uo6k6b"],outEdges:["17brhnu","6szgsj"],level:0,depth:2,tags:[],style:{border:"none",opacity:30},x:373,y:69,width:448,height:350,labelBBox:{x:6,y:0,width:126,height:15}},{id:"cloud",parent:null,level:0,children:["cloud.application"],inEdges:["17brhnu"],outEdges:[],title:"EdgeConnect Cloud",modelRef:"cloud",shape:"rectangle",color:"primary",style:{opacity:15,size:"md"},description:{txt:"Cloud environments"},tags:[],technology:"IaaS/PaaS",kind:"system",depth:1,isCustomized:!0,x:905,y:122,width:384,height:265,labelBBox:{x:6,y:0,width:132,height:15}},{id:"cloud.application",parent:"cloud",level:1,children:[],inEdges:[],outEdges:[],title:"application",modelRef:"cloud.application",shape:"rectangle",color:"primary",style:{opacity:15,size:"md"},description:{txt:"An application description"},tags:[],technology:"DSL",kind:"schema",x:937,y:175,width:320,height:180,labelBBox:{x:73,y:53,width:175,height:67}},{id:"developer",parent:"@gr1",level:1,children:[],inEdges:[],outEdges:["zjg544","1okgiq5"],title:"Developer",modelRef:"developer",shape:"person",color:"green",style:{opacity:15,size:"xs",textSize:"sm"},description:{txt:"The regular user of the platform"},tags:[],kind:"actor",x:63,y:530,width:180,height:100,labelBBox:{x:51,y:37,width:77,height:20}},{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:"xs",textSize:"sm"},description:{txt:"Coworking roles in the outer loop"},tags:[
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the 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:0,y:0,width:370,height:180,labelBBox:{x:46,y:17,width:308,height:139}},{id:"objectstorage",parent:null,level:0,children:[],inEdges:[],outEdges:[],title:"s3 Object Storage",modelRef:"objectstorage",shape:"rectangle",color:"primary",style:{opacity:20,size:"md"},description:{txt:"s3 Object Storage"},tags:[],technology:"S3 Object Storage",kind:"container",x:741,y:0,width:320,height:180,labelBBox:{x:78,y:53,width:164,height:67}},{id:"postgres",parent:null,level:0,children:[],inEdges:[],outEdges:[],title:"PostgreSQL",modelRef:"postgres",shape:"rectangle",color:"primary",icon:"tech:postgresql",style:{opacity:20,size:"md"},description:{txt:`PostgreSQL is a powerful, open source object-relational database system.
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
It has more than 15 years of active development and a proven architecture
that has earned it a strong reputation for reliability, data integrity,
and correctness.`},tags:[],technology:"PostgreSQL",kind:"container",x:1271,y:0,width:354,height:180,labelBBox:{x:46,y:17,width:293,height:139}},{id:"redis",parent:null,level:0,children:[],inEdges:[],outEdges:[],title:"Redis",modelRef:"redis",shape:"rectangle",color:"primary",icon:"tech:redis",style:{opacity:20,size:"md"},description:{txt:"Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker."},tags:[],technology:"Redis",kind:"container",x:1842,y:0,width:359,height:180,labelBBox:{x:46,y:26,width:297,height:121}},{id:"platformdeveloper",parent:null,level:0,children:[],inEdges:[],outEdges:["mox1r9","1tdgkqn","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:25,y:1053,width:320,height:180,labelBBox:{x:72,y:63,width:175,height:48}},{id:"customers",parent:null,level:0,children:[],inEdges:[],outEdges:["8fboq4"],title:"End Customers",modelRef:"customers",shape:"person",color:"amber",style:{opacity:15,size:"md"},description:{txt:"Consumers of your Application"},tags:[],kind:"actor",x:2457,y:1866,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:2457,y:1306,width:320,height:180,labelBBox:{x:23,y:36,width:274,height:102}},{id:"edfbuilder",parent:null,level:0,children:[],inEdges:["mox1r9"],outEdges:["lnq8uj"],title:"edfbuilder",modelRef:"edfbuilder",shape:"rectangle",color:"primary",icon:"tech:go",style:{opacity:15,size:"md"},description:{txt:"EDP Foundry Builder"},tags:[],technology:"Golang",kind:"component",navigateTo:"edpbuilderworkflow",x:741,y:1343,width:320,height:180,labelBBox:{x:74,y:53,width:202,height:67}},{id:"idpbuilder",parent:null,level:0,children:[],inEdges:["1tdgkqn"],outEdges:["1v8vv2f"],title:"idpbuilder",modelRef:"idpbuilder",shape:"rectangle",color:"primary",icon:"tech:go",style:{opacity:15,size:"md"},description:{txt:"Bootstrap tool for initial platform provisioning"},tags:[],technology:"Golang",kind:"component",x:733,y:560,width:335,height:180,labelBBox:{x:47,y:44,width:272,height:85}},{id:"documentation",parent:null,level:0,children:[],inEdges:["1kjl8ep"],outEdges:["14bjpe1"],title:"Documentation",modelRef:"documentation",shape:"rectangle",color:"primary",icon:"tech:electron",style:{opacity:15,size:"md"},description:{txt:"Documentation system for EDP LikeC4 platform."},tags:[],technology:"Static Site Generator",kind:"system",navigateTo:"components-template-documentation",x:709,y:840,width:384,height:180,labelBBox:{x:46,y:44,width:322,height:85}},{id:"edf",parent:null,level:0,children:[],inEdges:["lnq8uj","x7to90"],outEdges:["109bf6k"],title:"EDF",modelRef:"edf",shape:"rectangle",color:"primary",icon:"tech:kubernetes",style:{opacity:15,size:"md"},description:{txt:"EDP Foundry is a platform for building and deploying EDPs tenantwise."},tags:[],technology:"Kubernetes",kind:"system",x:1287,y:1073,width:321,height:180,labelBBox:{x:47,y:35,width:259,height:103}},{id:"@gr1",parent:null,kind:"@group",title:"developer-scope",color:"green",shape:"rectangle",children:["developer","otherProductLifecycleRoles","@gr2","@gr3"],inEdges:["1lyfj4n","1v8vv2f","14bjpe1","109bf6k"],outEdges:["1yfrmvt","1yfr9mr","162qbqw","1tbee2v","5mpoyf","1ivh6bj","gl7qul","17brhnu","35ru8e"],level:0,depth:2,tags:[],style:{border:"none",opacity:20},x:1221,y:1293,width:1046,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"}
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the 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:0,y:0,width:520,height:290,labelBBox:{x:72,y:46,width:406,height:189}},{id:"objectstorage",parent:null,level:0,children:[],inEdges:[],outEdges:[],title:"s3 Object Storage",modelRef:"objectstorage",shape:"rectangle",color:"primary",style:{opacity:20,size:"xl"},description:{txt:"s3 Object Storage"},tags:[],technology:"S3 Object Storage",kind:"container",x:859,y:0,width:520,height:290,labelBBox:{x:146,y:96,width:228,height:89}},{id:"postgres",parent:null,level:0,children:[],inEdges:[],outEdges:[],title:"PostgreSQL",modelRef:"postgres",shape:"rectangle",color:"primary",icon:"tech:postgresql",style:{opacity:20,size:"xl"},description:{txt:`PostgreSQL is a powerful, open source object-relational database system.
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
It has more than 15 years of active development and a proven architecture
that has earned it a strong reputation for reliability, data integrity,
and correctness.`},tags:[],technology:"PostgreSQL",kind:"container",x:1557,y:0,width:520,height:290,labelBBox:{x:83,y:46,width:384,height:189}},{id:"redis",parent:null,level:0,children:[],inEdges:[],outEdges:[],title:"Redis",modelRef:"redis",shape:"rectangle",color:"primary",icon:"tech:redis",style:{opacity:20,size:"xl"},description:{txt:"Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker."},tags:[],technology:"Redis",kind:"container",x:2294,y:0,width:520,height:290,labelBBox:{x:79,y:58,width:392,height:165}},{id:"platformdeveloper",parent:null,level:0,children:[],inEdges:[],outEdges:["mox1r9","1tdgkqn","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:1438,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:2534,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:1754,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:1783,width:520,height:290,labelBBox:{x:145,y:96,width:259,height:89}},{id:"idpbuilder",parent:null,level:0,children:[],inEdges:["1tdgkqn"],outEdges:["1v8vv2f"],title:"idpbuilder",modelRef:"idpbuilder",shape:"rectangle",color:"primary",icon:"tech:go",style:{opacity:15,size:"xl"},description:{txt:"Bootstrap tool for initial platform provisioning"},tags:[],technology:"Golang",kind:"component",x:859,y:780,width:520,height:290,labelBBox:{x:96,y:83,width:357,height:115}},{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:1170,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:1438,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","1v8vv2f","14bjpe1","109bf6k"],outEdges:["1yfrmvt","1yfr9mr","162qbqw","1tbee2v","5mpoyf","1ivh6bj","gl7qul","17brhnu","35ru8e"],level:0,depth:2,tags:[],style:{border:"none",opacity:20},x:1506,y:1768,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,si
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,g){if(!h||je)return"";je=!0;var b=Error.prepareStackTrace;Error.prepareStackTrace=void 0;try{var E={DetermineComponentFrameRoot:function(){try{if(g){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 M=E.DetermineComponentFrameRoot(),X=M[0],ne=M[1];if(X&&ne){var se=X.split(`
`),me=ne.split(`
`);for(D=E=0;E<se.length&&!se[E].includes("DetermineComponentFrameRoot");)E++;for(;D<me.length&&!me[D].includes("DetermineComponentFrameRoot");)D++;if(E===se.length||D===me.length)for(E=se.length-1,D=me.length-1;1<=E&&0<=D&&se[E]!==me[D];)D--;for(;1<=E&&0<=D;E--,D--)if(se[E]!==me[D]){if(E!==1||D!==1)do if(E--,D--,0>D||se[E]!==me[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,g){switch(h.tag){case 26:case 27:case 5:return xe(h.type);case 16:return xe("Lazy");case 13:return h.child!==g&&g!==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 g="",b=null;do g+=Je(h,b),b=h,h=h.return;while(h);return g}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 Kr(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 ui(h){var g=h&42;if(g!==0)return g;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,g,b){var E=h.pendingLanes;if(E===0)return 0;var D=0,M=h.suspendedLanes,X=h.pingedLanes;h=h.warmLanes;var ne=E&134217727;return ne!==0?(E=ne&~M,E!==0?D=ui(E):(X&=ne,X!==0?D=ui(X):b||(b=ne&~h,b!==0&&(D=ui(b))))):(ne=E&~M,ne!==0?D=ui(ne):X!==0?D=ui(X):b||(b=E&~h,b!==0&&(D=ui(b)))),D===0?0:g!==0&&g!==D&&(g&M)===0&&(M=D&-D,b=g&-g,M>=b||M===32&&(b&4194048)!==0)?g:D}function Ao(h,g){return(h.pendingLanes&~(h.suspendedLanes&~h.pingedLanes)&g)===0}function xs(h,g){switch(h){case 1:case 2:case 4:case 8:case 64:return g+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 g+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 g=[],b=0;31>b;b++)g.push(h);return g}function Pl(h,g){h.pendingLanes|=g,g!==268435456&&(h.suspendedLanes=0,h.pingedLanes=0,h.warmLanes=0)}function lh(h,g,b,E,D,M){var X=h.pendingLanes;h.pendingLanes=b,h.suspendedLanes=0,h.pingedLanes=0,h.warmLanes=0,h.expiredLanes&=b,h.entangledLanes&=b,h.errorRecoveryDisabledLanes&=b,h.shellSuspendCounter=0;var ne=h.entanglements,se=h.expirationTimes,me=h.hiddenUpdates;for(b=X&~b;0<b;){var Ee=31-Gt(b),Re=1<<Ee;ne[Ee]=0,se[Ee]=-1;var ye=me[Ee];if(ye!==null)for(me[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),M!==0&&D===0&&h.tag!==0&&(h.suspendedLanes|=M&~(X&~g))}function ks(h,g,b){h.pendingLanes|=g,h.suspendedLanes&=~g;var E=31-Gt(g);h.entangledLanes|=g,h.entanglements[E]=h.entanglements[E]|1073741824|b&261930}function tu(h,g){var b=h.entangledLanes|=g;for(h=h.entanglements;b;){var E=31-Gt(b),D=1<<E;D&g|h[E]&g&&(h[E]|=g),b&=~D}}function Xo(h,g){var b=g&-g;return b=(b&42)!==0?1:Tc(b),(b&(h.suspendedLanes|g))!==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:Dme(h.type))}function Ss(h,g){var b=F.p;try{return F.p=h,g()}finally{F.p=b}}var Ko=Math.random().toString(36).slice(2),Mr="__reactFiber$"+Ko,Pn="__reactProps$"+Ko,Do="__reactContainer$"+Ko,Ml="__reactEvents$"+Ko,jc="__reactListeners$"+Ko,sh="__reactHandles$"+Ko,Li="__reactResources$"
`).replace(Kxt,"")}function lme(h,g){return g=ame(g),ame(h)===g}function kr(h,g,b,E,D,M){switch(b){case"children":typeof E=="string"?g==="body"||g==="textarea"&&E===""||Fe(h,E):(typeof E=="number"||typeof E=="bigint")&&g!=="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,M);break;case"data":if(g!=="object"){$s(h,"data",E);break}case"src":case"href":if(E===""&&(g!=="a"||b!=="href")){h.removeAttribute(b);break}if(E==null||typeof E=="function"||typeof E=="symbol"||typeof E=="boolean"){h.removeAttribute(b);break}E=vt(""+E),h.setAttribute(b,E);break;case"action":case"formAction":if(typeof E=="function"){h.setAttribute(b,"javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')");break}else typeof M=="function"&&(b==="formAction"?(g!=="input"&&kr(h,g,"name",D.name,D,null),kr(h,g,"formEncType",D.formEncType,D,null),kr(h,g,"formMethod",D.formMethod,D,null),kr(h,g,"formTarget",D.formTarget,D,null)):(kr(h,g,"encType",D.encType,D,null),kr(h,g,"method",D.method,D,null),kr(h,g,"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":Po(h,"http://www.w3.org/1999/xlink","xlink:actuate",E);break;case"xlinkArcrole":Po(h,"http://www.w3.org/1999/xlink","xlink:arcrole",E);break;case"xlinkRole":Po(h,"http://www.w3.org/1999/xlink","xlink:role",E);break;case"xlinkShow":Po(h,"http://www.w3.org/1999/xlink","xlink:show",E);break;case"xlinkTitle":Po(h,"http://www.w3.org/1999/xlink","xlink:title",E);break;case"xlinkType":Po(h,"http://www.w3.org/1999/xlink","xlink:type",E);break;case"xmlBase":Po(h,"http://www.w3.org/XML/1998/namespace","xm
.`.concat(aet,` {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the 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(Pg,`] {
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the 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(i,`px;
padding-top: `).concat(a,`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(Pg,`] {
`).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(Pg)||"0",10);return isFinite(e)?e:0},Ret=function(){S.useEffect(function(){return document.body.setAttribute(Pg,(hne()+1).toString()),function(){var e=hne()-1;e<=0?document.body.removeAttribute(Pg):document.body.setAttribute(Pg,e.toString())}},[])},zet=function(e){var r=e.noRelative,n=e.noImportant,o=e.gapMode,i=o===void 0?"margin":o;Ret();var a=S.useMemo(function(){return Eet(i)},[i]);return S.createElement(Cet,{styles:$et(a,!r,i,n?"":"!important")})},Pz=!1;if(typeof window<"u")try{var k4=Object.defineProperty({},"passive",{get:function(){return Pz=!0,!0}});window.addEventListener("test",k4,k4),window.removeEventListener("test",k4,k4)}catch{Pz=!1}var Mg=Pz?{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")},gne=function(e,r){var n=r.ownerDocument,o=r;do{typeof ShadowRoot<"u"&&o instanceof ShadowRoot&&(o=o.host);var i=mne(e,o);if(i){var a=yne(e,o),l=a[1],s=a[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]},Pet=function(e){var r=e.scrollLeft,n=e.scrollWidth,o=e.clientWidth;return[r,n,o]},mne=function(e,r){return e==="v"?jet(r):Aet(r)},yne=function(e,r){return e==="v"?Det(r):Pet(r)},Met=function(e,r){return e==="h"&&r==="rtl"?-1:1},Net=function(e,r,n,o,i){var a=Met(e,window.getComputedStyle(r).direction),l=a*o,s=n.target,c=r.contains(s),d=!1,u=l>0,p=0,f=0;do{if(!s)break;var m=yne(e,s),v=m[0],w=m[1],x=m[2],k=w-x-a*v;(v||k)&&mne(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,Ng=[];function Let(e){var r=S.useRef([]),n=S.useRef([0,0]),o=S.useRef(),i=S.useState(Oet++)[0],a=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(i));var w=iet([e.lockRef.current],(e.shards||[]).map(bne)).filter(Boolean);return w.forEach(function(x){return x.classList.add("allow-interactivity-".concat(i))}),function(){document.body.classList.remove("block-interactivity-".concat(i)),w.forEach(function(x){return x.classList.remove("allow-interactivity-".concat(i))})}}},[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=gne(A,T);if(!z)return!0;if(z?R=A:(R=A==="v"?"h":"v",z=gne(A,T)),!z)return!1;if(!o.current&&"changedTouches"in w&&(_||$)&&(o.current=R),!R)return!0;var j=o.current||R;return Net(j,x,w,j==="h"?_:$)},[]),c=S.useCallback(function(w){var x=w;if(!(!Ng.length||Ng[Ng.length-1]!==a)){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 Ng.push(a),e.setCallbacks({onScrollCapture:p,onWheelCapture:p,onTouchMoveCapture:f}),document.addEventListener("wheel",c,Mg),document.addEventListener("touchmove",c,Mg),document.addEventListener("touchstart",u,Mg),function(){Ng=Ng.filter(function(w){return w!==a}),document.removeEventListener("wheel",c,Mg),document.removeEventListener("touchmove",c,Mg),document.removeEventListener("touchstart",u,Mg)}},[]);var m=e.removeScrollBar,v=e.inert;return S.createElement(S.Fragment,null,v?S.createElement(a,{styles:Iet(i)}):null,m?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=get(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 i=`${o/16}${e}`;return r?wne(i):i}if(typeof o=="string"){if(o===""||o.startsWith("calc(")||o.startsWith("clamp(")||o.includes("rgba("))return o;if(o.includes(","))return o.split(",").map(a=>n(a)).join(",");if(o.includes(" "))return o.split(" ").map(a=>n(a)).join(" ");const i=o.replace("px","");if(!Number.isNaN(Number(i))){const a=`${Number(i)/16}${e}`;return r?wne(a):a}}return o}return n}const Ne=kne("rem",{shouldScale:!0});
`;let Y,K=!0;const O=j.numbers=="binary",W=j.numbers=="octal",Z=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()":(P||(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(),i(z,te=>{K=!1,G&&(j.__inline2__=!1),Y.push((P||G?"":B)+A(te,j))}),K?"[]":G?"["+Y.join(", ")+"]":"["+U+Y.join(","+U)+U+(P?"":F)+"]";if(f(z)||m(z)){if(L)return JSON.stringify(Number(z));let te;if(Z)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 m(z)?te+"n":te}else return m(z)?L?JSON.stringify(Number(z)):z+"n":u(z)?(Y=[],j.wrap=!0,I(),n(z,(te,re)=>{K=!1,Y.push((P?"":B)+A(te,j)+":"+(P?"":" ")+A(re,j))}),K?"{}":"{"+U+Y.join(","+U)+U+(P?"":F)+"}"):L?JSON.stringify(z)||"null":String(z)}const ie=j.escapeEverything?R:T;return Y=z.replace(ie,(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 a(l(je,V))+a(l(Be,V))}if(ue)return a(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?a(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(),i=El({select:x=>{var k;return(k=x.matches.find(C=>C.id===e))==null?void 0:k.routeId}});S5(i);const a=o.routesById[i],l=a.options.pendingComponent??o.options.defaultPendingComponent,s=l?y.jsx(l,{}):null,c=a.options.errorComponent??o.options.defaultErrorComponent,d=a.options.onCatch??o.options.defaultOnCatch,u=a.isRoot?a.options.notFoundComponent??((r=o.options.notFoundRoute)==null?void 0:r.options.component):a.options.notFoundComponent,p=(!a.isRoot||a.options.wrapInSuspense)&&(a.options.wrapInSuspense??l??((n=a.options.errorComponent)==null?void 0:n.preload))?S.Suspense:Cj,f=c?mle:Cj,m=u?ist: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($5(x))throw x;d?.(x,k)},children:y.jsx(m,{fallback:x=>{if(!u||x.routeId&&x.routeId!==i||!x.routeId&&!a.isRoot)throw x;return S.createElement(u,x)},children:y.jsx(pst,{matchId:e})})})})}),w===gle&&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 i;o&&(n.current===void 0||n.current.href!==((i=r.state.resolvedLocation)==null?void 0:i.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 i=Up(),{match:a,key:l,routeId:s}=El({select:p=>{const f=p.matches.findIndex(k=>k.id===e),m=p.matches[f],v=m.routeId,w=i.routesById[v].options.remountDeps??i.options.defaultRemountDeps,x=w?.({routeId:v,loaderDeps:m.loaderDeps,params:m._strictParams,search:m._strictSearch});return{key:x?JSON.stringify(x):void 0,routeId:v,match:qlt(m,["id","status","error"])}},structuralSharing:!0}),c=i.routesById[s],d=S.useMemo(()=>{const p=c.options.component??i.options.defaultComponent;return p?y.jsx(p,{},l):y.jsx(hst,{})},[l,c.options.component,i.options.defaultComponent]),u=(c.options.errorComponent??i.options.defaultErrorComponent)||kj;if(a.status==="notFound")return S5($5(a.error)),Cle(i,c,a.error);if(a.status==="redirected")throw S5(Glt(a.error)),(r=i.getMatch(a.id))==null?void 0:r.loadPromise;if(a.status==="error"){if(i.isServer)return y.jsx(u,{error:a.error,reset:void 0,info:{componentStack:""}});throw a.error}if(a.status==="pending"){const p=c.options.pendingMinMs??i.options.defaultPendingMinMs;if(p&&!((n=i.getMatch(a.id))!=null&&n.minPendingPromise)&&!i.isServer){const f=Hlt();Promise.resolve().then(()=>{i.updateMatch(a.id,m=>({...m,minPendingPromise:f}))}),setTimeout(()=>{f.resolve(),i.updateMatch(a.id,m=>({...m,minPendingPromise:void 0}))},p)}throw(o=i.getMatch(a.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],i=El({select:c=>{const d=c.matches.find(u=>u.id===r);return S5(d),d.globalNotFound}}),a=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(i)return Cle(e,o,void 0);if(!a)return null;const l=y.jsx(dst,{matchId:a}),s=e.options.defaultPendingComponent?y.jsx(e.options.defaultPendingComponent,{}):null;return r===gle?y.jsx(S.Suspense,{fallback:s,children:l}):l}),fst=typeof window<"u"?S.useLayoutEffect:S.useEffect;function gst(e,r,n={},o={}){const i=S.useRef(typeof IntersectionObserver=="function"),a=S.useRef(null);return S.useEffect(()=>{if(!(!e.current||!i.current||o.disabled))return a.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=m=>{if(i.current=m.ctrlKey||m.metaKey||m.shiftKey||m.altKey,(!i.current||i.current&&!d)&&Ise(m))return!1;const v=Ece(m.code,s);if(a.current.add(m[v]),Sce(l,a.current,!1)){const w=m.composedPath?.()?.[0]||m.target,x=w?.nodeName==="BUTTON"||w?.nodeName==="A";r.preventDefault!==!1&&(i.current||!x)&&m.preventDefault(),o(!0)}},p=m=>{const v=Ece(m.code,s);Sce(l,a.current,!0)?(o(!1),a.current.clear()):a.current.delete(m[v]),m.key==="Meta"&&a.current.clear(),i.current=!1},f=()=>{a.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(i=>r.has(i)))}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,i,a],panZoom:l}=e.getState();return l?(await l.setViewport({x:r.x??o,y:r.y??i,zoom:r.zoom??a},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:i,minZoom:a,maxZoom:l,panZoom:s}=e.getState(),c=Xj(r,o,i,a,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:i,snapToGrid:a,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??i,p=n.snapToGrid??a;return cv(d,o,p,u)},flowToScreenPosition:r=>{const{transform:n,domNode:o}=e.getState();if(!o)return r;const{x:i,y:a}=o.getBoundingClientRect(),l=ek(r,n);return{x:l.x+i,y:l.y+a}}}),[])};function Cce(e,r){const n=[],o=new Map,i=[];for(const a of e)if(a.type==="add"){i.push(a);continue}else if(a.type==="remove"||a.type==="replace")o.set(a.id,[a]);else{const l=o.get(a.id);l?l.push(a):o.set(a.id,[a])}for(const a of r){const l=o.get(a.id);if(!l){n.push(a);continue}if(l[0].type==="remove")continue;if(l[0].type==="replace"){n.push({...l[0].item});continue}const s={...a};for(const c of l)_ht(c,s);n.push(s)}return i.length&&i.forEach(a=>{a.index!==void 0?n.splice(a.index,0,{...a.item}):n.push({...a.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 pm(e,r=new Set,n=!1){const o=[];for(const[i,a]of e){const l=r.has(i);!(a.selected===void 0&&!l)&&a.selected!==l&&(n&&(a.selected=l),o.push(Jp(a.id,l)))}return o}function $ce({items:e=[],lookup:r}){const n=[],o=new Map(e.map(i=>[i.id,i]));for(const[i,a]of e.entries()){const l=r.get(a.id),s=l?.internals?.userNode??l;s!==void 0&&s!==a&&n.push({id:a.id,item:a,type:"replace"}),s===void 0&&n.push({item:a,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 fgt=e=>r=>e?`${Math.max(1/r.transform[2],1)}`:void 0,ggt={[um.Line]:"right",[um.Handle]:"bottom-right"};function mgt({nodeId:e,position:r,variant:n=um.Handle,className:o,style:i=void 0,children:a,color:l,minWidth:s=10,minHeight:c=10,maxWidth:d=Number.MAX_VALUE,maxHeight:u=Number.MAX_VALUE,keepAspectRatio:p=!1,resizeDirection:f,autoScale:m=!0,shouldResize:v,onResizeStart:w,onResize:x,onResizeEnd:k}){const C=Nce(),_=typeof e=="string"?e:C,$=qr(),R=S.useRef(null),T=n===um.Handle,A=Jt(S.useCallback(fgt(T&&m),[T,m]),Vr),z=S.useRef(null),j=r??ggt[n];S.useEffect(()=>{if(!(!R.current||!_))return z.current||(z.current=Zpt({domNode:R.current,nodeId:_,getStoreItems:()=>{const{nodeLookup:N,transform:L,snapGrid:H,snapToGrid:P,nodeOrigin:V,domNode:B}=$.getState();return{nodeLookup:N,transform:L,snapGrid:H,snapToGrid:P,nodeOrigin:V,paneDomNode:B}},onChange:(N,L)=>{const{triggerNodeChanges:H,nodeLookup:P,parentLookup:V,nodeOrigin:B}=$.getState(),F=[],q={x:N.x,y:N.y},G=P.get(_);if(G&&G.expandParent&&G.parentId){const U=G.origin??B,Y=N.width??G.measured.width??0,K=N.height??G.measured.height??0,O={id:G.id,parentId:G.parentId,rect:{width:Y,height:K,...Mse({x:N.x??G.position.x,y:N.y??G.position.y},{width:Y,height:K},G.parentId,P,U)}},W=oA([O],P,V,B);F.push(...W),q.x=N.x?Math.max(U[0]*Y,N.x):void 0,q.y=N.y?Math.max(U[1]*K,N.y):void 0}if(q.x!==void 0&&q.y!==void 0){const U={id:_,type:"position",position:{...q}};F.push(U)}if(N.width!==void 0&&N.height!==void 0){const U={id:_,type:"dimensions",resizing:!0,setAttributes:f?f==="horizontal"?"width":"height":!0,dimensions:{width:N.width,height:N.height}};F.push(U)}for(const U of L){const Y={...U,type:"position"};F.push(Y)}H(F)},onEnd:({width:N,height:L})=>{const H={id:_,type:"dimensions",resizing:!1,dimensions:{width:N,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:{...i,scale:A,...l&&{[T?"backgroundColor":"borderColor"]:l}},children:a})}S.memo(mgt);const{getOwnPropertyNames:ygt,getOwnPropertySymbols:vgt}=Object,{hasOwnProperty:bgt}=Object.prototype;function fA(e,r){return function(n,o,i){return e(n,o,i)&&r(n,o,i)}}function pk(e){return function(r,n,o){if(!r||!n||typeof r!="object"||typeof n!="object")return e(r,n,o);const{cache:i}=o,a=i.get(r),l=i.get(n);if(a&&l)return a===n&&l===r;i.set(r,n),i.set(n,r);const s=e(r,n,o);return i.delete(r),i.delete(n),s}}function xgt(e){return e?.[Symbol.toStringTag]}function gde(e){return ygt(e).concat(vgt(e))}const wgt=Object.hasOwn||((e,r)=>bgt.call(e,r));function eh(e,r){return e===r||!e&&!r&&e!==e&&r!==r}const kgt="__v",_gt="__o",Sgt="_owner",{getOwnPropertyDescriptor:mde,keys:yde}=Object;function Egt(e,r){return e.byteLength===r.byteLength&&hk(new Uint8Array(e),new Uint8Array(r))}function Cgt(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 $gt(e,r){return e.byteLength===r.byteLength&&hk(new Uint8Array(e.buffer,e.byteOffset,e.byteLength),new Uint8Array(r.buffer,r.byteOffset,r.byteLength))}function Rgt(e,r){return eh(e.getTime(),r.getTime())}function zgt(e,r){return e.name===r.name&&e.message===r.message&&e.cause===r.cause&&e.stack===r.stack}function Tgt(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 i=new Array(o),a=e.entries();let l,s,c=0;for(;(l=a.next())&&!l.done;){const d=r.entries();let u=!1,p=0;for(;(s=d.next())&&!s.done;){if(i[p]){p++;continue}const f=l.value,m=s.value;if(n.equals(f[0],m[0],c,p,e,r,n)&&n.equals(f[1],m[1],f[0],m[0],e,r,n)){u=i[p]=!0;break}p++}if(!u)return!1;c++}return!0}const jgt=eh;function Agt(e,r,n){const o=yde
`).filter(a=>a),o=Math.min(...n.map(a=>a.length-a.trimStart().length)),i=n.map(a=>a.slice(o)).map(a=>" ".repeat(this.indent*2)+a);for(const a of i)this.content.push(a)}compile(){const r=Function,n=this?.args,o=[...(this?.content??[""]).map(i=>` ${i}`)];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 i of o)for(const a of i._zod.onattach)a(e);if(o.length===0)(n=e._zod).deferred??(n.deferred=[]),e._zod.deferred?.push(()=>{e._zod.run=e._zod.parse});else{const i=(a,l,s)=>{let c=Cv(a),d;for(const u of l){if(u._zod.def.when){if(!u._zod.def.when(a))continue}else if(c)continue;const p=a.issues.length,f=u._zod.check(a);if(f instanceof Promise&&s?.async===!1)throw new _v;if(d||f instanceof Promise)d=(d??Promise.resolve()).then(async()=>{await f,a.issues.length!==p&&(c||(c=Cv(a,p)))});else{if(a.issues.length===p)continue;c||(c=Cv(a,p))}}return d?d.then(()=>a):a};e._zod.run=(a,l)=>{const s=e._zod.parse(a,l);if(s instanceof Promise){if(l.async===!1)throw new _v;return s.then(c=>i(c,o,l))}return i(s,o,l)}}e["~standard"]={validate:i=>{try{const a=ryt(e,i);return a.success?{value:a.data}:{issues:a.error?.issues}}catch{return nyt(e,i).then(a=>a.success?{value:a.data}:{issues:a.error?.issues})}},vendor:"zod",version:1}}),Pk=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)=>{Dk.init(e,r),Pk.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,i=new URL(o),a=i.href;r.hostname&&(r.hostname.lastIndex=0,r.hostname.test(i.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(i.protocol.endsWith(":")?i.protocol.slice(0,-1):i.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("/")&&a.endsWith("/")?n.value=a.slice(0,-1):n.value=a;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=iyt),Ur.init(e,r)}),Xyt=Te("$ZodULID",(e,r)=>{r.pattern??(r.pattern=ayt),Ur.init(e,r)}),Kyt=Te("$ZodXID",(e,r)=>{r.pattern??(r.pattern=lyt),Ur.init(e,r)}),Zyt=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=gyt),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=myt),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)}),i0t=Te("$ZodCIDRv6",(e,r)=>{r.pattern??(r.pattern=vyt),Ur.init(e,r),e._zod.check=n=>{const[o,i]=n.value.split("/");try{if(!i)throw new Error;const a=Number(i);if(`${a}`!==i)throw new Error;if(a<0||a>128)throw new Err
feat(docs): integrate LikeC4 interactive diagrams into Hugo/Docsy Implement complete integration of LikeC4 interactive architecture diagrams into the Hugo/Docsy documentation system, enabling embedded web components for exploring C4 models directly in documentation pages. Integration Components: Static Assets: - static/js/likec4-webcomponent.js (3.1 MB) - Generated web component containing all 54 C4 views as interactive embeddable elements - static/js/likec4-loader.js - Dynamic ES6 module loader with fallback paths for robust component loading across different page depths - static/css/likec4-styles.css - Styling for diagram containers with dark mode support for Docsy theme compatibility Hugo Configuration: - hugo.toml - Added params.likec4.enable configuration flag - layouts/partials/hooks/head-end.html - Hook to inject CSS and JS when LikeC4 is enabled site-wide Documentation: - content/en/docs/architecture/_index.md - Architecture section index - content/en/docs/architecture/highlevelarch.md - Example page with interactive OTC FaaS deployment diagram demonstrating integration - content/en/docs/architecture/setup.md - Comprehensive setup guide covering installation, usage, workflow, and troubleshooting - resources/likec4/INTEGRATION.md - Technical integration details - LIKEC4-QUICKSTART.md - Quick start guide for developers Features: - Interactive diagram exploration (click components for details) - Automatic loading indicators with timeout fallback - Graceful degradation for non-JS environments - Dark mode support matching Docsy theme - Multiple diagrams per page support - Browser compatibility detection Usage Pattern: ```html <div class="likec4-container"> <div class="likec4-header">Diagram Title</div> <likec4-view view-id="otc-faas" browser="true"></likec4-view> <div class="likec4-loading">Loading...</div> </div> ``` Workflow: 1. Edit .c4 files in resources/likec4/ 2. Run: npx likec4 gen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js 3. Commit both model changes and regenerated webcomponent Available Views: - otc-faas, edp, landscape, edpbuilderworkflow - keycloak, forgejo, argocd, crossplane, monitoring - And 40+ more component and deployment views The integration preserves the MkDocs-style embedding approach from edp-doc while adapting it to Hugo's static site generation model. This completes the migration making this repository the central hub for both C4 architecture models and their rendered documentation.
2025-10-24 13:08:59 +02:00
if (${C}.issues.length) {
if (input[${_}] === undefined) {
if (${_} in input) {
newResult[${_}] = undefined;
}
} else {
payload.issues = payload.issues.concat(
${C}.issues.map((iss) => ({
...iss,
path: iss.path ? [${_}, ...iss.path] : [${_}],
}))
);
}
} else if (${C}.value === undefined) {
if (${_} in input) newResult[${_}] = undefined;
} else {
newResult[${_}] = ${C}.value;
}
`)}else{const C=v[k];p.write(`const ${C} = ${m(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 i;const a=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(!a(f))return u.issues.push({expected:"object",code:"invalid_type",input:f,inst:e}),u;const m=[];if(l&&s&&p?.async===!1&&p.jitless!==!0)i||(i=o(r.shape)),u=i(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?m.push(R.then(A=>T?Bpe(A,u,_,f):Mk(A,u,_))):T?Bpe(R,u,_,f):Mk(R,u,_)}}if(!c)return m.length?Promise.all(m).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?m.push(_.then($=>Mk($,u,C))):Mk(_,u,C)}return v.length&&u.issues.push({code:"unrecognized_keys",keys:v,input:f,inst:e}),m.length?Promise.all(m).then(()=>u):u}});function Ipe(e,r,n,o){for(const i of e)if(i.issues.length===0)return r.value=i.value,r;return r.issues.push({code:"invalid_union",input:r.value,inst:n,errors:e.map(i=>i.issues.map(a=>ah(a,o,oh())))}),r}const m0t=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 i=!1;const a=[];for(const l of r.options){const s=l._zod.run({value:n.value,issues:[]},o);if(s instanceof Promise)a.push(s),i=!0;else{if(s.issues.length===0)return s;a.push(s)}}return i?Promise.all(a).then(l=>Ipe(l,n,e,o)):Ipe(a,n,e,o)}}),y0t=Te("$ZodIntersection",(e,r)=>{an.init(e,r),e._zod.parse=(n,o)=>{const i=n.value,a=r.left._zod.run({value:i,issues:[]},o),l=r.right._zod.run({value:i,issues:[]},o);return a instanceof Promise||l instanceof Promise?Promise.all([a,l]).then(([s,c])=>Ope(n,s,c)):Ope(n,a,l)}});function ND(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(a=>n.indexOf(a)!==-1),i={...e,...r};for(const a of o){const l=ND(e[a],r[a]);if(!l.valid)return{valid:!1,mergeErrorPath:[a,...l.mergeErrorPath]};i[a]=l.data}return{valid:!0,data:i}}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 i=e[o],a=r[o],l=ND(i,a);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=ND(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,i)=>{const a=o.value;return e._zod.values.has(a)||o.issues.push({code:"invalid_value",values:n,input:a,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 i=n.value;return e._zod.values.has(i)||n.issues.push({code:"invalid_value",values:r.values,input:i,inst:e}),n}}),Lpe=Te("$ZodTransform",(e,r)=>{an.init(e,r),e._zod.parse=(n,o)=>{const i=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 */