Skip to content

Commit 50babb6

Browse files
Kasper Jungeclaude
authored and
Kasper Junge
committed
feat: add landing page and website build pipeline for ralphify.co
Landing page (website/), Dockerfile for Coolify, justfile with website build recipes, brand-guidelines skill. Docs site_url updated to ralphify.co/docs/. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 0b39bab commit 50babb6

8 files changed

Lines changed: 644 additions & 2 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ dist/
66
.claude/
77
.codex/
88
site/
9+
_site/
910
ralph_logs/
1011
node_modules/
1112
.playwright-cli/

‎Dockerfile‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
FROM python:3.12-slim AS build
2+
3+
RUN pip install uv
4+
5+
WORKDIR /app
6+
COPY . .
7+
8+
RUN uv sync --frozen
9+
RUN uv run --group dev python -m mkdocs build --strict --site-dir _site/docs
10+
11+
RUN mkdir -p _site && cp -r website/* _site/
12+
13+
FROM nginx:alpine
14+
COPY --from=build /app/_site /usr/share/nginx/html
15+
EXPOSE 80

‎justfile‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# Ralphify — website & docs build tasks
2+
# These recipes build the static site served at ralphify.co
3+
4+
# Output directory for the combined site (separate from dist/ which is for the Python package)
5+
site_dir := "_site"
6+
7+
# Build everything: landing page + docs → dist/website/
8+
[group('website')]
9+
website-build: website-build-landing website-build-docs
10+
11+
# Build only the landing page → dist/website/
12+
[group('website')]
13+
website-build-landing:
14+
rm -rf {{ site_dir }}
15+
mkdir -p {{ site_dir }}
16+
cp -r website/* {{ site_dir }}/
17+
18+
# Build only the mkdocs site → dist/website/docs/
19+
[group('website')]
20+
website-build-docs:
21+
uv run --group dev python -m mkdocs build --strict --site-dir {{ site_dir }}/docs
22+
23+
# Preview the landing page (serves dist/website/ on port 8080)
24+
[group('website')]
25+
website-preview: website-build
26+
cd {{ site_dir }} && python3 -m http.server 8080
27+
28+
# Preview docs only (mkdocs dev server on port 8000)
29+
[group('website')]
30+
docs-preview:
31+
uv run --group dev python -m mkdocs serve

‎mkdocs.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
site_name: Ralphify
22
site_description: Harness toolkit for autonomous AI coding loops
3-
site_url: https://computerlovetech.github.io/ralphify/
3+
site_url: https://ralphify.co/docs/
44
repo_url: https://github.com/computerlovetech/ralphify
55
repo_name: computerlovetech/ralphify
66
edit_uri: edit/main/docs/

‎pyproject.toml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ dev = [
3434
]
3535

3636
[project.urls]
37-
Documentation = "https://computerlovetech.github.io/ralphify/"
37+
Documentation = "https://ralphify.co/docs/"
3838
Repository = "https://github.com/computerlovetech/ralphify"
3939
Issues = "https://github.com/computerlovetech/ralphify/issues"
4040

‎skills/brand-guidelines/SKILL.md‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
---
2+
name: brand-guidelines
3+
description: Applies Ralphify's official brand colors, typography, and visual style to any artifact — landing pages, slides, diagrams, social graphics. Use when Ralphify's look-and-feel should be applied.
4+
license: MIT (see project root LICENSE)
5+
---
6+
7+
# Ralphify Brand Guidelines
8+
9+
Use these rules when generating any visual artifact (HTML pages, CSS, slides, graphics, diagrams) that should carry the Ralphify brand.
10+
11+
## Brand identity
12+
13+
- **Name**: Ralphify (always capitalized, never "RALPHIFY" or "ralphify" in headings/prose)
14+
- **CLI command**: `ralph` (always lowercase, monospace)
15+
- **Tagline**: "Put your AI coding agent in a `while True` loop and let it ship."
16+
- **Positioning**: Minimal CLI harness for autonomous AI coding loops. Inspired by the Ralph Wiggum technique.
17+
- **Logo icon**: Infinity symbol (∞) — represents the infinite loop concept
18+
- **Copyright**: Computerlove Technologies
19+
20+
## Colors
21+
22+
### Primary palette
23+
24+
| Name | Hex | Usage |
25+
|----------------|-----------|---------------------------------------------|
26+
| **Purple** | `#8B6CF0` | Primary brand color, buttons, headers, icons |
27+
| **Purple Dark**| `#7C5CE0` | Hover states, links (light mode) |
28+
| **Purple Light**| `#A78BF5`| Dark-mode accent, hover gradients, dark-mode links |
29+
| **Purple Deep**| `#7C4DFF` | Header gradient end |
30+
31+
### Accent palette
32+
33+
| Name | Hex | Usage |
34+
|----------------|-----------|-----------------------------------------------|
35+
| **Orange** | `#E06030` | Secondary brand color, gradient endpoints |
36+
| **Orange Light**| `#E87B4A`| Tagline gradient end, warm accents |
37+
38+
### Neutral palette
39+
40+
| Name | Hex | Usage |
41+
|----------------|-----------|-------------------------------------|
42+
| **White** | `#FFFFFF` | Light-mode backgrounds |
43+
| **Slate BG** | `#1E1E2E` | Dark-mode backgrounds (Material Slate) |
44+
| **Text Dark** | `#2E2E3E` | Primary body text (light mode) |
45+
| **Text Light** | `#E0E0E0` | Primary body text (dark mode) |
46+
47+
### Brand gradient
48+
49+
The signature visual is a **purple → orange** gradient used for hero elements and the tagline:
50+
51+
```css
52+
/* Primary brand gradient */
53+
background: linear-gradient(135deg, #8B6CF0 0%, #E87B4A 100%);
54+
55+
/* Button gradient (purple only) */
56+
background: linear-gradient(135deg, #8B6CF0 0%, #A78BF5 100%);
57+
58+
/* Header bar gradient */
59+
background: linear-gradient(90deg, rgba(139, 108, 240, 0.95) 0%, rgba(124, 77, 255, 0.95) 100%);
60+
```
61+
62+
## Typography
63+
64+
- **Headings**: System sans-serif stack — `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`. Bold weight (600–700).
65+
- **Body**: Same system stack, regular weight (400). Line-height 1.6 for readability.
66+
- **Code / CLI output**: Monospace — `"SF Mono", "Fira Code", "JetBrains Mono", Consolas, monospace`.
67+
- No custom web fonts are required. The brand relies on color and gradients, not typography.
68+
69+
## Visual style
70+
71+
### General principles
72+
73+
- **Minimal and clean**. Ralphify is a small, focused tool — the visual style reflects that. No clutter.
74+
- **Purple as the anchor**. Purple (#8B6CF0) is the primary visual element. Orange is the accent that adds warmth.
75+
- **Generous whitespace**. Let content breathe.
76+
- **Dark mode is first-class**. Every element must look good in both light and dark schemes.
77+
78+
### Component patterns
79+
80+
- **Buttons (primary)**: Purple gradient background, white text, 600 weight, rounded corners. Hover: slight lift (`translateY(-1px)`) + purple glow shadow (`box-shadow: 0 4px 12px rgba(139, 108, 240, 0.35)`).
81+
- **Buttons (secondary)**: Transparent background, purple border and text. Hover: subtle purple fill (`rgba(139, 108, 240, 0.08)`).
82+
- **Cards**: White/dark background, 8px border-radius. Hover: lift (`translateY(-3px)`) + soft shadow.
83+
- **Icons in cards**: Tinted purple (#8B6CF0 light, #A78BF5 dark).
84+
- **Code blocks**: 6px border-radius.
85+
- **Section dividers (hr)**: 2px solid, purple-tinted (`rgba(139, 108, 240, 0.15)` light, `rgba(167, 139, 245, 0.2)` dark).
86+
- **Links**: Purple (#7C5CE0 light, #A78BF5 dark). No underline by default; underline on hover.
87+
- **Footer**: Subtle gradient wash (`rgba(139, 108, 240, 0.08)` → `rgba(232, 123, 74, 0.06)`). Dark mode: solid dark.
88+
89+
### Animation
90+
91+
- Transitions are subtle and fast: `0.15s ease` for buttons, `0.2s ease` for cards.
92+
- Only translate and shadow transitions. No rotation, scaling, or opacity fades on interaction.
93+
94+
## Tone of voice (for copy)
95+
96+
- **Direct and concise**. Lead with what the tool does, not what it is.
97+
- **Confident but not hype-y**. "Two commands to start" not "Revolutionary AI framework".
98+
- **Code-first**. Show terminal output and commands before explaining.
99+
- **Conversational**. "That's it. Two commands." is on-brand. "Leveraging cutting-edge paradigms" is not.
100+
101+
## Landing page structure (reference)
102+
103+
When building a landing page for Ralphify, follow this hierarchy:
104+
105+
1. **Hero**: CLI banner image + tagline + CTA buttons (Get Started / View Cookbook)
106+
2. **Install**: Tabbed code blocks (uv / pipx / pip)
107+
3. **Quick demo**: Terminal output showing the loop in action
108+
4. **Primitives**: Card grid showing Checks, Contexts, Ralphs
109+
5. **Requirements**: Short list
110+
6. **Next steps**: Links to docs
111+
112+
## Asset references
113+
114+
- **CLI banner**: `docs/assets/cli-banner.png` — the purple-gradient ASCII art banner used in docs and README
115+
- **Logo icon**: Material Design Icons `infinity` symbol (for use in nav/favicons)
116+
- **Social**: GitHub repo + PyPI badges

‎website/index.html‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Ralphify — Put your AI coding agent in a while True loop</title>
7+
<meta name="description" content="Minimal CLI harness for autonomous AI coding loops. Pipe a prompt to an agent, validate with checks, repeat.">
8+
<link rel="stylesheet" href="styles.css">
9+
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>∞</text></svg>">
10+
</head>
11+
<body>
12+
<header>
13+
<nav>
14+
<a href="/" class="logo">∞ Ralphify</a>
15+
<div class="nav-links">
16+
<a href="/docs/">Docs</a>
17+
<a href="https://github.com/computerlovetech/ralphify">GitHub</a>
18+
<a href="https://pypi.org/project/ralphify/">PyPI</a>
19+
</div>
20+
</nav>
21+
</header>
22+
23+
<main>
24+
<section class="hero">
25+
<h1>Put your AI coding agent in a <code>while True</code> loop and let it ship.</h1>
26+
<p class="subtitle">Ralphify is a minimal CLI harness for autonomous AI coding loops. Pipe a prompt to an agent, validate with checks, repeat.</p>
27+
<div class="cta">
28+
<a href="/docs/getting-started/" class="btn btn-primary">Get Started</a>
29+
<a href="/docs/cookbook/" class="btn btn-secondary">View Cookbook</a>
30+
</div>
31+
</section>
32+
33+
<section class="terminal">
34+
<div class="terminal-window">
35+
<div class="terminal-header">
36+
<span class="terminal-dot red"></span>
37+
<span class="terminal-dot yellow"></span>
38+
<span class="terminal-dot green"></span>
39+
</div>
40+
<pre><code><span class="prompt">$</span> ralph init
41+
<span class="dim">Created ralph.toml + RALPH.md</span>
42+
43+
<span class="prompt">$</span> ralph run -n 3
44+
<span class="dim">── Iteration 1 ──</span>
45+
<span class="success">✓</span> Iteration 1 completed (52.3s)
46+
Checks: 2 passed
47+
<span class="success">✓</span> lint
48+
<span class="success">✓</span> tests
49+
50+
<span class="dim">── Iteration 2 ──</span>
51+
<span class="fail">✗</span> Iteration 2 failed with exit code 1 (23.1s)
52+
Checks: 1 passed, 1 failed
53+
<span class="success">✓</span> lint
54+
<span class="fail">✗</span> tests (exit 1)
55+
56+
<span class="dim">── Iteration 3 ──</span>
57+
<span class="success">✓</span> Iteration 3 completed (41.7s)
58+
Checks: 2 passed
59+
<span class="success">✓</span> lint
60+
<span class="success">✓</span> tests
61+
62+
<span class="dim">Done: 3 iteration(s) — 2 succeeded, 1 failed</span></code></pre>
63+
</div>
64+
<p class="terminal-caption">Iteration 2 broke a test. Iteration 3 saw the failure and fixed it — that's the self-healing loop.</p>
65+
</section>
66+
67+
<section class="install">
68+
<h2>Install</h2>
69+
<div class="install-command">
70+
<code>uv tool install ralphify</code>
71+
</div>
72+
</section>
73+
74+
<section class="features">
75+
<h2>Three primitives</h2>
76+
<p class="features-subtitle">Extend the basic loop with building blocks that live in <code>.ralphify/</code></p>
77+
<div class="card-grid">
78+
<div class="card">
79+
<h3>Checks</h3>
80+
<p>Run after each iteration to validate the agent's work. Failed check output feeds into the next iteration so the agent can fix its own mistakes.</p>
81+
</div>
82+
<div class="card">
83+
<h3>Contexts</h3>
84+
<p>Inject dynamic data into the prompt before each iteration — git history, test status, API responses. The agent always sees fresh information.</p>
85+
</div>
86+
<div class="card">
87+
<h3>Ralphs</h3>
88+
<p>Named, task-focused prompts you switch between at run time. Keep a docs ralph, a refactor ralph, and a bug-fix ralph.</p>
89+
</div>
90+
</div>
91+
</section>
92+
93+
<section class="cta-bottom">
94+
<h2>Two commands to start</h2>
95+
<div class="install-command">
96+
<code>ralph init && ralph run</code>
97+
</div>
98+
<a href="/docs/getting-started/" class="btn btn-primary">Read the guide</a>
99+
</section>
100+
</main>
101+
102+
<footer>
103+
<p>&copy; 2025–2026 Computerlove Technologies &middot; <a href="https://github.com/computerlovetech/ralphify/blob/main/LICENSE">MIT License</a></p>
104+
</footer>
105+
</body>
106+
</html>

0 commit comments

Comments
 (0)