docs: add architecture and veins documentation

- System overview, artery hierarchy, build flow, room config diagrams - Veins docs: Jira, Slack, Google OAuth - Shunts docs: MercadoPago mock - DOT source files with generated SVGs - HTML viewers with navigation and full-screen mode Solves: - Freelance work standardization - Missing infrastructure replication (shunts) - Reliable testing environment (BDD -> Gherkin -> Tests)
2026-01-02 22:09:13 -03:00
parent 05e7ead081
commit 22356fed66
22 changed files with 2887 additions and 0 deletions
--- a/docs/veins/graph.html
+++ b/docs/veins/graph.html
@@ -0,0 +1,115 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Graph Viewer - Veins</title>
+        <link rel="stylesheet" href="../architecture/styles.css" />
+    </head>
+    <body class="graph-viewer">
+        <header class="graph-header">
+            <a href="index.html" class="back-link">← Back</a>
+            <div class="nav-controls">
+                <button onclick="navigate(-1)" id="btn-prev" title="Previous">◀</button>
+                <span id="nav-position">1 / 4</span>
+                <button onclick="navigate(1)" id="btn-next" title="Next">▶</button>
+            </div>
+            <h1 id="graph-title">Loading...</h1>
+            <div class="graph-controls">
+                <button onclick="setMode('fit')">Fit</button>
+                <button onclick="setMode('fit-width')">Width</button>
+                <button onclick="setMode('fit-height')">Height</button>
+                <button onclick="setMode('actual-size')">100%</button>
+                <button onclick="downloadSvg()">↓ SVG</button>
+            </div>
+        </header>
+
+        <div class="graph-container" id="graph-container">
+            <img id="graph-img" src="" alt="Graph" />
+        </div>
+
+        <script>
+            const graphOrder = [
+                "jira",
+                "slack",
+                "google",
+                "mercadopago-shunt",
+            ];
+
+            const graphs = {
+                "jira": {
+                    title: "Jira Vein",
+                    file: "jira.svg",
+                },
+                "slack": {
+                    title: "Slack Vein",
+                    file: "slack.svg",
+                },
+                "google": {
+                    title: "Google Vein (OAuth)",
+                    file: "google.svg",
+                },
+                "mercadopago-shunt": {
+                    title: "MercadoPago Shunt",
+                    file: "mercadopago-shunt.svg",
+                },
+            };
+
+            const params = new URLSearchParams(window.location.search);
+            let graphKey = params.get("g") || "jira";
+            let currentIndex = graphOrder.indexOf(graphKey);
+            if (currentIndex === -1) currentIndex = 0;
+
+            function loadGraph(key) {
+                const graph = graphs[key];
+                document.getElementById("graph-title").textContent = graph.title;
+                document.getElementById("graph-img").src = graph.file;
+                document.title = graph.title + " - Soleprint";
+                history.replaceState(null, "", "?g=" + key);
+                graphKey = key;
+                updateNavHints();
+            }
+
+            function updateNavHints() {
+                const idx = graphOrder.indexOf(graphKey);
+                const prevBtn = document.getElementById("btn-prev");
+                const nextBtn = document.getElementById("btn-next");
+                prevBtn.disabled = idx === 0;
+                nextBtn.disabled = idx === graphOrder.length - 1;
+                document.getElementById("nav-position").textContent =
+                    idx + 1 + " / " + graphOrder.length;
+            }
+
+            function navigate(direction) {
+                const idx = graphOrder.indexOf(graphKey);
+                const newIdx = idx + direction;
+                if (newIdx >= 0 && newIdx < graphOrder.length) {
+                    currentIndex = newIdx;
+                    loadGraph(graphOrder[newIdx]);
+                }
+            }
+
+            function setMode(mode) {
+                const container = document.getElementById("graph-container");
+                container.className = "graph-container " + mode;
+            }
+
+            function downloadSvg() {
+                const graph = graphs[graphKey];
+                const link = document.createElement("a");
+                link.href = graph.file;
+                link.download = graph.file;
+                link.click();
+            }
+
+            document.addEventListener("keydown", (e) => {
+                if (e.key === "ArrowLeft") navigate(-1);
+                else if (e.key === "ArrowRight") navigate(1);
+                else if (e.key === "Escape") window.location.href = "index.html";
+            });
+
+            loadGraph(graphOrder[currentIndex]);
+            setMode("fit");
+        </script>
+    </body>
+</html>