55 lines
1.6 KiB
Plaintext
55 lines
1.6 KiB
Plaintext
digraph wrapping {
|
|
bgcolor="#0a0a0a"
|
|
rankdir=LR
|
|
fontname="Helvetica"
|
|
node [fontname="Helvetica" fontsize=11 style=filled color="#333" fontcolor="#e5e5e5" shape=box]
|
|
edge [fontname="Helvetica" fontsize=9 fontcolor="#a3a3a3" color="#666"]
|
|
|
|
label="Sidebar Injection — How Wrapping Works"
|
|
labelloc=t
|
|
fontsize=14
|
|
fontcolor="#d4a574"
|
|
|
|
browser [label="Browser" fillcolor="#1a1a1a" shape=oval]
|
|
|
|
subgraph cluster_nginx {
|
|
label="Nginx (reverse proxy)"
|
|
style=dashed
|
|
color="#d4a574"
|
|
fontcolor="#d4a574"
|
|
|
|
proxy [label="proxy_pass\n+\nsub_filter\ninjects sidebar" fillcolor="#1a1a1a" shape=component]
|
|
}
|
|
|
|
subgraph cluster_app {
|
|
label="Managed App"
|
|
style=dashed
|
|
color="#333"
|
|
fontcolor="#666"
|
|
|
|
frontend [label="Frontend\n(React/Next/Vue)" fillcolor="#1a1a1a"]
|
|
backend [label="Backend API" fillcolor="#1a1a1a"]
|
|
}
|
|
|
|
subgraph cluster_spr {
|
|
label="Soleprint"
|
|
style=dashed
|
|
color="#d4a574"
|
|
fontcolor="#d4a574"
|
|
|
|
sidebar_css [label="sidebar.css" fillcolor="#1a1a1a"]
|
|
sidebar_js [label="sidebar.js" fillcolor="#1a1a1a"]
|
|
hub [label="Hub API\n/api/sidebar/config" fillcolor="#1a1a1a"]
|
|
}
|
|
|
|
browser -> proxy [label="myroom.spr.local.ar"]
|
|
proxy -> frontend [label="/ → app"]
|
|
proxy -> hub [label="/spr/ → soleprint"]
|
|
|
|
// The injection
|
|
proxy -> sidebar_css [label="injects into </head>" color="#d4a574" style=dashed]
|
|
proxy -> sidebar_js [color="#d4a574" style=dashed]
|
|
|
|
sidebar_js -> hub [label="loads config" color="#d4a574"]
|
|
}
|