Skip to content

Commit c386382

Browse files
scgopiclaude
scgopi
and
claude
committed
The site and README open with the GraphCode banner
The Pages site replaces Cayman's stock green header with a responsive hero in the brand's design language — icon mark, wordmark, tagline, terminal-style install pill, and the glowing node constellation as inline SVG, hidden below tablet width. index.md drops the link block the hero now carries. The layout override needs its own .gitignore carve-out since docs/* is ignored by design. The README leads with the rendered 1500x500 banner (docs/assets/ banner.png, shared with the site) over centered badges and quick links, replacing the H1 and tagline the banner already carries. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
1 parent e2fc64f commit c386382

6 files changed

Lines changed: 310 additions & 12 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,4 +40,5 @@ xcuserdata/
4040
/docs/*
4141
!/docs/index.md
4242
!/docs/_config.yml
43+
!/docs/_layouts/
4344
!/docs/assets/

‎README.md‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,20 @@
1-
# GraphCode
2-
3-
*Graphs of live, steerable Claude Code sessions on macOS.*
4-
5-
[![Release](https://img.shields.io/github/v/release/scgopi/GraphCode)](https://github.com/scgopi/GraphCode/releases)
6-
![Platform](https://img.shields.io/badge/platform-macOS%2015%2B%20(Apple%20Silicon)-blue)
7-
[![License: MIT](https://img.shields.io/badge/license-MIT-green)](LICENSE)
1+
<p align="center">
2+
<a href="https://scgopi.github.io/GraphCode/">
3+
<img src="docs/assets/banner.png" alt="GraphCode — graphs of live, steerable Claude Code sessions on macOS" width="100%">
4+
</a>
5+
</p>
6+
7+
<p align="center">
8+
<a href="https://github.com/scgopi/GraphCode/releases"><img src="https://img.shields.io/github/v/release/scgopi/GraphCode" alt="Release"></a>
9+
<img src="https://img.shields.io/badge/platform-macOS%2015%2B%20(Apple%20Silicon)-blue" alt="Platform">
10+
<a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-green" alt="License: MIT"></a>
11+
</p>
12+
13+
<p align="center">
14+
<a href="https://scgopi.github.io/GraphCode/">Website</a> ·
15+
<a href="https://github.com/scgopi/GraphCode/releases/latest/download/graphcode-macos-arm64.dmg">Download .dmg</a> ·
16+
<a href="https://github.com/scgopi/GraphCode/releases">All releases</a>
17+
</p>
818

919
You can run one Claude Code session in a terminal. GraphCode lets you run ten —
1020
connected, unattended, and still yours to attach to and correct mid-run. Each node in the

‎docs/_layouts/default.html‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
<!DOCTYPE html>
2+
<html lang="{{ site.lang | default: "en-US" }}">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
{% seo %}
8+
<link rel="stylesheet" href="{{ "/assets/css/style.css?v=" | append: site.github.build_revision | relative_url }}">
9+
{% include head-custom.html %}
10+
</head>
11+
<body>
12+
<a id="skip-to-content" href="#content">Skip to the content.</a>
13+
14+
<header class="gc-hero" role="banner">
15+
<div class="gc-hero-inner">
16+
<div class="gc-hero-text">
17+
<div class="gc-brand">
18+
<span class="gc-mark" aria-hidden="true">
19+
<svg viewBox="0 0 92 92" width="64" height="64">
20+
<g stroke="#c9cdd3" stroke-width="5" stroke-linecap="round" opacity="0.85">
21+
<line x1="34" y1="30" x2="63" y2="37"/>
22+
<line x1="34" y1="30" x2="27" y2="61"/>
23+
<line x1="34" y1="30" x2="55" y2="62"/>
24+
<line x1="63" y1="37" x2="55" y2="62"/>
25+
<line x1="27" y1="61" x2="55" y2="62"/>
26+
</g>
27+
<g fill="#ffffff">
28+
<circle cx="34" cy="30" r="9.5"/>
29+
<circle cx="63" cy="37" r="8"/>
30+
<circle cx="27" cy="61" r="8"/>
31+
<circle cx="55" cy="62" r="8.5"/>
32+
</g>
33+
</svg>
34+
</span>
35+
<span class="gc-wordmark">Graph<span class="gc-thin">Code</span></span>
36+
</div>
37+
<p class="gc-tagline">
38+
Graphs of <strong>live, steerable Claude&nbsp;Code sessions</strong> on macOS.
39+
Run ten at once — connected, unattended, still yours to attach to and correct mid-run.
40+
</p>
41+
<div class="gc-install"><span class="gc-prompt">$</span> brew install --cask scgopi/graphcode/graphcode<i class="gc-cursor"></i></div>
42+
<div class="gc-links">
43+
<a class="btn" href="https://github.com/scgopi/GraphCode">View on GitHub</a>
44+
<a class="btn" href="https://github.com/scgopi/GraphCode/releases/latest/download/graphcode-macos-arm64.dmg">⬇ Download .dmg</a>
45+
<span class="gc-meta">macOS 15+ · Apple Silicon · MIT</span>
46+
</div>
47+
</div>
48+
<svg class="gc-constellation" viewBox="850 20 640 470" fill="none" aria-hidden="true">
49+
<defs>
50+
<linearGradient id="gc-edge" x1="0" y1="0" x2="1" y2="1">
51+
<stop offset="0" stop-color="#9aa0a8" stop-opacity="0.55"/>
52+
<stop offset="1" stop-color="#9aa0a8" stop-opacity="0.28"/>
53+
</linearGradient>
54+
<radialGradient id="gc-node" cx="0.35" cy="0.3" r="1">
55+
<stop offset="0" stop-color="#ffffff"/>
56+
<stop offset="1" stop-color="#dfe3e8"/>
57+
</radialGradient>
58+
<filter id="gc-glow-w" x="-120%" y="-120%" width="340%" height="340%">
59+
<feGaussianBlur stdDeviation="10" result="b"/>
60+
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
61+
</filter>
62+
<filter id="gc-glow-t" x="-120%" y="-120%" width="340%" height="340%">
63+
<feGaussianBlur stdDeviation="12" result="b"/>
64+
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
65+
</filter>
66+
</defs>
67+
<g stroke="url(#gc-edge)" stroke-width="7" stroke-linecap="round">
68+
<line x1="1015" y1="128" x2="1205" y2="92"/>
69+
<line x1="1015" y1="128" x2="1128" y2="268"/>
70+
<line x1="1205" y1="92" x2="1330" y2="212"/>
71+
<line x1="1128" y1="268" x2="1330" y2="212"/>
72+
<line x1="1128" y1="268" x2="1042" y2="402"/>
73+
<line x1="1128" y1="268" x2="1300" y2="392"/>
74+
<line x1="1330" y1="212" x2="1300" y2="392"/>
75+
<line x1="935" y1="245" x2="1015" y2="128"/>
76+
<line x1="935" y1="245" x2="1128" y2="268"/>
77+
<line x1="935" y1="245" x2="1042" y2="402"/>
78+
<line x1="1205" y1="92" x2="1408" y2="60" stroke-opacity="0.5"/>
79+
<line x1="1330" y1="212" x2="1452" y2="300" stroke-opacity="0.5"/>
80+
<line x1="1300" y1="392" x2="1424" y2="452" stroke-opacity="0.45"/>
81+
</g>
82+
<g filter="url(#gc-glow-w)">
83+
<circle cx="1015" cy="128" r="34" fill="url(#gc-node)"/>
84+
<circle cx="1205" cy="92" r="27" fill="url(#gc-node)"/>
85+
<circle cx="1042" cy="402" r="29" fill="url(#gc-node)"/>
86+
<circle cx="1408" cy="60" r="17" fill="url(#gc-node)" opacity="0.85"/>
87+
<circle cx="1452" cy="300" r="15" fill="url(#gc-node)" opacity="0.8"/>
88+
<circle cx="1424" cy="452" r="13" fill="url(#gc-node)" opacity="0.7"/>
89+
</g>
90+
<g filter="url(#gc-glow-t)">
91+
<circle cx="935" cy="245" r="38" fill="#5eead4"/>
92+
<circle cx="1128" cy="268" r="44" fill="#a5b4fc"/>
93+
<circle cx="1330" cy="212" r="31" fill="#fcd34d"/>
94+
<circle cx="1300" cy="392" r="25" fill="#f0abfc" opacity="0.95"/>
95+
</g>
96+
<g font-family="SF Mono, Menlo, monospace" font-weight="700" text-anchor="middle">
97+
<text x="935" y="257" font-size="34" fill="#0f2e29">&gt;_</text>
98+
<text x="1128" y="282" font-size="40" fill="#272b52">&gt;_</text>
99+
<text x="1330" y="223" font-size="28" fill="#4d3a06">&gt;_</text>
100+
</g>
101+
</svg>
102+
</div>
103+
</header>
104+
105+
<main id="content" class="main-content" role="main">
106+
{{ content }}
107+
108+
<footer class="site-footer">
109+
{% if site.github.is_project_page %}
110+
<span class="site-footer-owner"><a href="{{ site.github.repository_url }}">{{ site.github.repository_name }}</a> is maintained by <a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a>.</span>
111+
{% endif %}
112+
<span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a>.</span>
113+
</footer>
114+
</main>
115+
</body>
116+
</html>

‎docs/assets/banner.png‎

449 KB
Loading

‎docs/assets/css/style.scss‎

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,179 @@ body {
2323
background-color: #0d1117;
2424
}
2525

26+
// Hero banner — the GraphCode brand header, replacing Cayman's .page-header.
27+
// Same design language as the app icon and the X banner: charcoal gradient,
28+
// dot-grid canvas, glowing node constellation, terminal install pill.
29+
.gc-hero {
30+
position: relative;
31+
overflow: hidden;
32+
color: #b8bcc4;
33+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
34+
background:
35+
radial-gradient(1100px 700px at 78% 42%, #33373d 0%, rgba(51, 55, 61, 0) 60%),
36+
radial-gradient(900px 600px at 12% 88%, #2b2e33 0%, rgba(43, 46, 51, 0) 55%),
37+
linear-gradient(160deg, #26292d 0%, #1b1d20 55%, #141517 100%);
38+
39+
&::before {
40+
content: "";
41+
position: absolute;
42+
inset: 0;
43+
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.055) 1.2px, transparent 1.3px);
44+
background-size: 34px 34px;
45+
-webkit-mask-image: radial-gradient(70% 90% at 55% 45%, #000 30%, transparent 78%);
46+
mask-image: radial-gradient(70% 90% at 55% 45%, #000 30%, transparent 78%);
47+
pointer-events: none;
48+
}
49+
}
50+
51+
.gc-hero-inner {
52+
position: relative;
53+
display: flex;
54+
align-items: center;
55+
gap: 1rem;
56+
max-width: 64rem;
57+
margin: 0 auto;
58+
padding: 3.5rem 2rem 3rem;
59+
}
60+
61+
.gc-hero-text {
62+
flex: 1 1 34rem;
63+
min-width: 0;
64+
}
65+
66+
.gc-brand {
67+
display: flex;
68+
align-items: center;
69+
gap: 1.1rem;
70+
}
71+
72+
.gc-mark {
73+
display: inline-flex;
74+
flex: none;
75+
padding: 0.45rem;
76+
border-radius: 16px;
77+
background: linear-gradient(165deg, #34383e 0%, #212428 70%, #1a1c1f 100%);
78+
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.09);
79+
80+
svg {
81+
display: block;
82+
}
83+
}
84+
85+
.gc-wordmark {
86+
font-size: 3.4rem;
87+
font-weight: 700;
88+
letter-spacing: -0.06rem;
89+
color: #f4f5f7;
90+
text-shadow: 0 0 44px rgba(255, 255, 255, 0.12);
91+
92+
.gc-thin {
93+
font-weight: 300;
94+
color: #c8cbd1;
95+
}
96+
}
97+
98+
.gc-tagline {
99+
margin: 1.1rem 0 0;
100+
font-size: 1.15rem;
101+
line-height: 1.5;
102+
max-width: 34rem;
103+
104+
strong {
105+
color: #eceef1;
106+
}
107+
}
108+
109+
.gc-install {
110+
display: inline-block;
111+
margin-top: 1.3rem;
112+
padding: 0.6rem 1rem;
113+
background: rgba(10, 11, 12, 0.72);
114+
border: 1px solid rgba(255, 255, 255, 0.14);
115+
border-radius: 10px;
116+
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
117+
font-family: "SF Mono", SFMono-Regular, Consolas, Menlo, monospace;
118+
font-size: 0.95rem;
119+
color: #dfe2e7;
120+
white-space: nowrap;
121+
max-width: 100%;
122+
overflow-x: auto;
123+
124+
.gc-prompt {
125+
color: #8b929c;
126+
}
127+
128+
.gc-cursor {
129+
display: inline-block;
130+
width: 0.5rem;
131+
height: 1.05rem;
132+
margin-left: 0.15rem;
133+
background: #e8eaee;
134+
vertical-align: text-bottom;
135+
opacity: 0.9;
136+
border-radius: 1.5px;
137+
}
138+
}
139+
140+
.gc-links {
141+
display: flex;
142+
flex-wrap: wrap;
143+
align-items: center;
144+
gap: 0.6rem;
145+
margin-top: 1.2rem;
146+
147+
.btn {
148+
margin: 0;
149+
padding: 0.55rem 1rem;
150+
color: #dfe2e7;
151+
border-color: rgba(255, 255, 255, 0.2);
152+
153+
&:hover {
154+
border-color: rgba(255, 255, 255, 0.4);
155+
background-color: rgba(255, 255, 255, 0.06);
156+
}
157+
}
158+
159+
.gc-meta {
160+
font-size: 0.85rem;
161+
color: #7f858e;
162+
letter-spacing: 0.01rem;
163+
}
164+
}
165+
166+
.gc-constellation {
167+
flex: 0 1 24rem;
168+
min-width: 16rem;
169+
align-self: stretch;
170+
}
171+
172+
@media screen and (max-width: 56em) {
173+
.gc-constellation {
174+
display: none;
175+
}
176+
177+
.gc-hero-inner {
178+
padding: 2.4rem 1.2rem 2.2rem;
179+
}
180+
181+
.gc-wordmark {
182+
font-size: 2.4rem;
183+
}
184+
185+
.gc-mark {
186+
padding: 0.35rem;
187+
188+
svg {
189+
width: 48px;
190+
height: 48px;
191+
}
192+
}
193+
194+
.gc-install {
195+
font-size: 0.8rem;
196+
}
197+
}
198+
26199
.main-content {
27200
table {
28201
th {

‎docs/index.md‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,9 @@ connected, unattended, and still yours to attach to and correct mid-run. That's
1010
**graph engineering**: your agents' work arranged as a graph you design, instead of a
1111
pile of terminals you babysit.
1212

13-
**`brew install --cask scgopi/graphcode/graphcode`**
14-
· [⬇ .dmg, latest release](https://github.com/scgopi/GraphCode/releases/latest/download/graphcode-macos-arm64.dmg)
15-
· [All releases](https://github.com/scgopi/GraphCode/releases) ·
16-
[Source on GitHub](https://github.com/scgopi/GraphCode) · Requires macOS 15+ on Apple
17-
Silicon, with Claude Code on your `PATH`.
13+
Requires **macOS 15+ on Apple Silicon**, with **Claude Code on your `PATH`** —
14+
GraphCode launches it, it doesn't bundle it.
15+
[All releases →](https://github.com/scgopi/GraphCode/releases)
1816

1917
![Two projects and their connected loops on one GraphCode canvas — goal-based, time-based, and proactive nodes, every one a live terminal](assets/graph-hero.png)
2018

0 commit comments

Comments
 (0)