scriptoriumadmin/fabro
1
0
Fork 0
mirror of https://github.com/fabro-sh/fabro.git synced 2026-10-07 03:00:29 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Add screenshots, workflow diagram, lightbox, and fix logotype viewBox

Browse source 
- Add runs-board.png below hero as product showcase
- Add plan-implement.svg workflow diagram in Workflow-as-Code section
  above the DOT code block, with dark-mode contrast fix
- Replace verification 2x2 card grid with run-detail.png screenshot
- Add click-to-expand lightbox for all three visual assets
- Fix logotype SVG viewBox (0 0 1455 → 0 0 1500) across all 5 files
  to prevent "O" in FABRO from being clipped
- Increase Docs link contrast in nav (text-ice-100, font-medium)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Bryan Helmkamp 2026-03-16 10:09:57 -04:00
parent c2a89a5898
commit 2924968a8a
9 changed files with 152 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/fabro-web/public/logotype-light.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.8 KiB

After

Width:  |  Height:  |  Size: 7.8 KiB

2
apps/fabro-web/public/logotype.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.8 KiB

After

Width:  |  Height:  |  Size: 7.8 KiB

2
apps/marketing/public/logotype.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.8 KiB

After

Width:  |  Height:  |  Size: 7.8 KiB

100
apps/marketing/public/plan-implement.svg Normal file
View file

@ -0,0 +1,100 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 14.1.3 (20260303.0454)
-->
<!-- Title: PlanImplement Pages: 1 -->
<svg width="674pt" height="44pt"
viewBox="0.00 0.00 674.00 44.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
[fill="#1a1a1a"] { fill: #e8edf3; }
[fill="#666666"] { fill: #a8b5c5; }
[stroke="#666666"] { stroke: #a8b5c5; }
[stroke="#999999"] { stroke: #4b5768; }
</style>
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 40.25)">
<title>PlanImplement</title>
<!-- start -->
<g id="node1" class="node">
<title>start</title>
<polygon fill="none" stroke="#357f9e" points="35.26,-36.12 0,-18.13 35.26,-0.13 70.52,-18.12 35.26,-36.12"/>
<polyline fill="none" stroke="#357f9e" points="10.69,-23.58 10.69,-12.67"/>
<polyline fill="none" stroke="#357f9e" points="24.57,-5.58 45.95,-5.58"/>
<polyline fill="none" stroke="#357f9e" points="59.83,-12.67 59.83,-23.58"/>
<polyline fill="none" stroke="#357f9e" points="45.95,-30.67 24.57,-30.67"/>
<text xml:space="preserve" text-anchor="middle" x="35.26" y="-13.1" font-family="Helvetica,sans-Serif" font-size="12.00" fill="#1a1a1a">Start</text>
</g>
<!-- plan -->
<g id="node3" class="node">
<title>plan</title>
<path fill="none" stroke="#357f9e" d="M149.52,-36.12C149.52,-36.12 119.52,-36.12 119.52,-36.12 113.52,-36.12 107.52,-30.12 107.52,-24.12 107.52,-24.12 107.52,-12.12 107.52,-12.12 107.52,-6.12 113.52,-0.12 119.52,-0.12 119.52,-0.12 149.52,-0.12 149.52,-0.12 155.52,-0.12 161.52,-6.12 161.52,-12.12 161.52,-12.12 161.52,-24.13 161.52,-24.13 161.52,-30.12 155.52,-36.12 149.52,-36.12"/>
<text xml:space="preserve" text-anchor="middle" x="134.52" y="-13.1" font-family="Helvetica,sans-Serif" font-size="12.00" fill="#1a1a1a">Plan</text>
</g>
<!-- start&#45;&gt;plan -->
<g id="edge1" class="edge">
<title>start&#45;&gt;plan</title>
<path fill="none" stroke="#666666" d="M71.37,-18.12C79.34,-18.12 87.84,-18.12 95.91,-18.12"/>
<polygon fill="#666666" stroke="#666666" points="95.8,-21.63 105.8,-18.13 95.8,-14.63 95.8,-21.63"/>
</g>
<!-- exit -->
<g id="node2" class="node">
<title>exit</title>
<polygon fill="none" stroke="#357f9e" points="666.18,-36.25 629.93,-36.25 629.93,0 666.18,0 666.18,-36.25"/>
<polyline fill="none" stroke="#357f9e" points="641.93,-36.25 629.93,-24.25"/>
<polyline fill="none" stroke="#357f9e" points="629.93,-12 641.93,0"/>
<polyline fill="none" stroke="#357f9e" points="654.18,0 666.18,-12"/>
<polyline fill="none" stroke="#357f9e" points="666.18,-24.25 654.18,-36.25"/>
<text xml:space="preserve" text-anchor="middle" x="648.05" y="-13.1" font-family="Helvetica,sans-Serif" font-size="12.00" fill="#1a1a1a">Exit</text>
</g>
<!-- approve -->
<g id="node4" class="node">
<title>approve</title>
<polygon fill="none" stroke="#357f9e" points="353.68,-18.12 322.33,-36.12 259.62,-36.12 228.27,-18.13 259.62,-0.13 322.33,-0.12 353.68,-18.12"/>
<text xml:space="preserve" text-anchor="middle" x="290.98" y="-13.1" font-family="Helvetica,sans-Serif" font-size="12.00" fill="#1a1a1a">Approve Plan</text>
</g>
<!-- plan&#45;&gt;approve -->
<g id="edge2" class="edge">
<title>plan&#45;&gt;approve</title>
<path fill="none" stroke="#666666" d="M161.72,-18.12C176.76,-18.12 196.47,-18.12 215.91,-18.12"/>
<polygon fill="#666666" stroke="#666666" points="215.77,-21.63 225.77,-18.13 215.77,-14.63 215.77,-21.63"/>
</g>
<!-- approve&#45;&gt;plan -->
<g id="edge4" class="edge">
<title>approve&#45;&gt;plan</title>
<path fill="none" stroke="#666666" d="M247.15,-6.91C226.65,-3 201.77,-0.36 179.52,-3.88 177.32,-4.22 175.08,-4.66 172.83,-5.17"/>
<polygon fill="#666666" stroke="#666666" points="171.93,-1.79 163.18,-7.77 173.75,-8.55 171.93,-1.79"/>
<text xml:space="preserve" text-anchor="middle" x="194.9" y="-5.62" font-family="Helvetica,sans-Serif" font-size="10.00" fill="#666666">Revise</text>
</g>
<!-- implement -->
<g id="node5" class="node">
<title>implement</title>
<path fill="none" stroke="#357f9e" d="M485.18,-36.12C485.18,-36.12 437.68,-36.12 437.68,-36.12 431.68,-36.12 425.68,-30.12 425.68,-24.12 425.68,-24.12 425.68,-12.12 425.68,-12.12 425.68,-6.12 431.68,-0.12 437.68,-0.12 437.68,-0.12 485.18,-0.12 485.18,-0.12 491.18,-0.12 497.18,-6.12 497.18,-12.12 497.18,-12.12 497.18,-24.13 497.18,-24.13 497.18,-30.12 491.18,-36.12 485.18,-36.12"/>
<text xml:space="preserve" text-anchor="middle" x="461.43" y="-13.1" font-family="Helvetica,sans-Serif" font-size="12.00" fill="#1a1a1a">Implement</text>
</g>
<!-- approve&#45;&gt;implement -->
<g id="edge3" class="edge">
<title>approve&#45;&gt;implement</title>
<path fill="none" stroke="#666666" d="M354.22,-18.12C374,-18.12 395.51,-18.12 413.97,-18.12"/>
<polygon fill="#666666" stroke="#666666" points="413.81,-21.63 423.81,-18.13 413.81,-14.63 413.81,-21.63"/>
<text xml:space="preserve" text-anchor="middle" x="389.68" y="-19.88" font-family="Helvetica,sans-Serif" font-size="10.00" fill="#666666">Approve</text>
</g>
<!-- simplify -->
<g id="node6" class="node">
<title>simplify</title>
<path fill="none" stroke="#357f9e" d="M580.93,-36.12C580.93,-36.12 546.18,-36.12 546.18,-36.12 540.18,-36.12 534.18,-30.12 534.18,-24.12 534.18,-24.12 534.18,-12.12 534.18,-12.12 534.18,-6.12 540.18,-0.12 546.18,-0.12 546.18,-0.12 580.93,-0.12 580.93,-0.12 586.93,-0.12 592.93,-6.12 592.93,-12.12 592.93,-12.12 592.93,-24.13 592.93,-24.13 592.93,-30.12 586.93,-36.12 580.93,-36.12"/>
<text xml:space="preserve" text-anchor="middle" x="563.55" y="-13.1" font-family="Helvetica,sans-Serif" font-size="12.00" fill="#1a1a1a">Simplify</text>
</g>
<!-- implement&#45;&gt;simplify -->
<g id="edge5" class="edge">
<title>implement&#45;&gt;simplify</title>
<path fill="none" stroke="#666666" d="M497.45,-18.12C505.5,-18.12 514.12,-18.12 522.37,-18.12"/>
<polygon fill="#666666" stroke="#666666" points="522.17,-21.63 532.17,-18.13 522.17,-14.63 522.17,-21.63"/>
</g>
<!-- simplify&#45;&gt;exit -->
<g id="edge6" class="edge">
<title>simplify&#45;&gt;exit</title>
<path fill="none" stroke="#666666" d="M593.41,-18.12C601.43,-18.12 610.14,-18.12 618.17,-18.12"/>
<polygon fill="#666666" stroke="#666666" points="618.13,-21.63 628.13,-18.13 618.13,-14.63 618.13,-21.63"/>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
apps/marketing/public/run-detail.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3 MiB

BIN
apps/marketing/public/runs-board.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.8 MiB

77
apps/marketing/src/pages/index.astro
View file

@ -50,7 +50,7 @@ const cssExample = `<span class="text-ice-300">/* All nodes default to fast + ch
<a href="/" class="flex items-center">
<img src="/logotype.svg" alt="Fabro" class="h-7" />
</a>
<a href="https://docs.fabro.sh" class="text-sm text-ice-300 hover:text-ice-50 transition-colors">Docs</a>
<a href="https://docs.fabro.sh" class="text-sm font-medium text-ice-100 hover:text-ice-50 transition-colors">Docs</a>
</div>
<div class="flex items-center gap-5">
<a href="https://github.com/fabro-sh/fabro" class="text-ice-300 hover:text-ice-50 transition-colors" aria-label="GitHub">
@ -108,6 +108,13 @@ const cssExample = `<span class="text-ice-300">/* All nodes default to fast + ch
</a>
</div>
</div>
<!-- Runs board screenshot -->
<div class="reveal reveal-d4 mt-16">
<div class="rounded-xl border border-navy-800 shadow-[0_0_80px_-20px_rgba(103,178,215,0.12)] overflow-hidden">
<img src="/runs-board.png" alt="Fabro Runs board showing workflows across Working, Pending, Verify, and Merge stages" class="w-full" data-lightbox />
</div>
</div>
</div>
</section>
@ -306,15 +313,22 @@ const cssExample = `<span class="text-ice-300">/* All nodes default to fast + ch
</ul>
</div>
<!-- DOT example -->
<div class="reveal reveal-d2 rounded-xl border border-navy-800 bg-navy-900/60 p-6 shadow-[0_0_60px_-15px_rgba(103,178,215,0.08)]">
<div class="mb-3 flex items-center gap-2">
<span class="h-3 w-3 rounded-full bg-coral/70"></span>
<span class="h-3 w-3 rounded-full bg-amber/70"></span>
<span class="h-3 w-3 rounded-full bg-mint/70"></span>
<span class="ml-3 text-xs text-ice-300/60 font-mono">plan-implement.fabro</span>
<div class="reveal reveal-d1 space-y-5">
<!-- Rendered workflow graph -->
<div class="rounded-xl border border-navy-800 bg-navy-900/40 p-6 flex items-center justify-center">
<img src="/plan-implement.svg" alt="Plan-Implement workflow graph: Start → Plan → Approve Plan → Implement → Simplify → Exit with a Revise loop" class="w-full max-w-xl" data-lightbox />
</div>
<!-- DOT source code -->
<div class="rounded-xl border border-navy-800 bg-navy-900/60 p-6 shadow-[0_0_60px_-15px_rgba(103,178,215,0.08)]">
<div class="mb-3 flex items-center gap-2">
<span class="h-3 w-3 rounded-full bg-coral/70"></span>
<span class="h-3 w-3 rounded-full bg-amber/70"></span>
<span class="h-3 w-3 rounded-full bg-mint/70"></span>
<span class="ml-3 text-xs text-ice-300/60 font-mono">plan-implement.fabro</span>
</div>
<pre class="overflow-x-auto text-[13px] leading-relaxed"><code class="font-mono" set:html={dotExample} /></pre>
</div>
<pre class="overflow-x-auto text-[13px] leading-relaxed"><code class="font-mono" set:html={dotExample} /></pre>
</div>
</div>
</div>
@ -326,27 +340,8 @@ const cssExample = `<span class="text-ice-300">/* All nodes default to fast + ch
<div class="mx-auto max-w-6xl px-6 pt-28">
<div class="grid items-start gap-16 lg:grid-cols-2">
<div class="order-2 lg:order-1 reveal reveal-d1">
<div class="grid grid-cols-2 gap-4">
<div class="glow-card rounded-lg border border-navy-800 bg-navy-800/25 p-5">
<div class="mb-2 text-xs font-semibold uppercase tracking-wider text-teal-500">Gate</div>
<div class="font-display text-sm font-semibold text-ice-50">Build + Tests</div>
<p class="mt-1 text-xs text-ice-300">Hard gate. Failures trigger automatic fix loops.</p>
</div>
<div class="glow-card rounded-lg border border-navy-800 bg-navy-800/25 p-5">
<div class="mb-2 text-xs font-semibold uppercase tracking-wider text-teal-500">Gate</div>
<div class="font-display text-sm font-semibold text-ice-50">Static Analysis</div>
<p class="mt-1 text-xs text-ice-300">Linters, type checkers, policy checks at every stage.</p>
</div>
<div class="glow-card rounded-lg border border-navy-800 bg-navy-800/25 p-5">
<div class="mb-2 text-xs font-semibold uppercase tracking-wider text-amber">Layer</div>
<div class="font-display text-sm font-semibold text-ice-50">LLM-as-Judge</div>
<p class="mt-1 text-xs text-ice-300">Cross-critique from a fresh model with different blindspots.</p>
</div>
<div class="glow-card rounded-lg border border-navy-800 bg-navy-800/25 p-5">
<div class="mb-2 text-xs font-semibold uppercase tracking-wider text-mint">Human</div>
<div class="font-display text-sm font-semibold text-ice-50">Approval Gate</div>
<p class="mt-1 text-xs text-ice-300">Approve, revise, or steer agents mid-turn.</p>
</div>
<div class="rounded-xl border border-navy-800 shadow-[0_0_60px_-15px_rgba(103,178,215,0.08)] overflow-hidden">
<img src="/run-detail.png" alt="Fabro verification view showing Traceability, Readability, Reliability, Code Coverage, Maintainability, and Security checks" class="w-full" data-lightbox />
</div>
</div>
<div class="order-1 lg:order-2 reveal">
@ -663,7 +658,29 @@ const cssExample = `<span class="text-ice-300">/* All nodes default to fast + ch
</div>
</footer>
<!-- Lightbox overlay -->
<div id="lightbox" class="fixed inset-0 z-[100] hidden items-center justify-center bg-navy-950/90 backdrop-blur-sm cursor-zoom-out p-8">
<img id="lightbox-img" src="" alt="" class="max-h-full max-w-full rounded-xl shadow-2xl" />
</div>
<script>
// Lightbox
const lightbox = document.getElementById("lightbox");
const lightboxImg = document.getElementById("lightbox-img");
document.querySelectorAll("[data-lightbox]").forEach((el) => {
el.style.cursor = "zoom-in";
el.addEventListener("click", () => {
lightboxImg.src = el.src || el.querySelector("img")?.src || "";
lightboxImg.alt = el.alt || "";
lightbox.classList.remove("hidden");
lightbox.classList.add("flex");
});
});
lightbox.addEventListener("click", () => {
lightbox.classList.add("hidden");
lightbox.classList.remove("flex");
});
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {

2
docs-internal/assets/brand/logo/logotype-black.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.8 KiB

After

Width:  |  Height:  |  Size: 7.8 KiB

2
docs-internal/assets/brand/logo/logotype.svg
View file

@ -1,5 +1,5 @@
<?xml version='1.0' encoding='utf-8'?>
<svg xmlns="http://www.w3.org/2000/svg" width="882" height="211" viewBox="0 0 1455 348">
<svg xmlns="http://www.w3.org/2000/svg" width="909" height="211" viewBox="0 0 1500 348">
<defs>
<linearGradient id="topGradient" gradientUnits="userSpaceOnUse" x1="1200" y1="0" x2="0" y2="400">
<stop offset="0" stop-color="#c4dede" />

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.3 KiB

After

Width:  |  Height:  |  Size: 8.3 KiB