Skip to content

Commit 23df755

Browse files
cyclotruccyclotruc
committed
add docs
1 parent dd1f1ea commit 23df755

File tree

4 files changed

+301
-5
lines changed

4 files changed

+301
-5
lines changed

‎app/main.py‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,10 @@ async def favicon():
3434
favicon_path = static_dir / "favicon.ico"
3535
return FileResponse(favicon_path, media_type="image/x-icon")
3636

37+
@app.get("/doc", response_class=HTMLResponse, operation_id="get_docs_page")
38+
async def doc(request: Request):
39+
return templates.TemplateResponse("docs.html", {"request": request})
40+
3741
@app.get("/", response_class=HTMLResponse, operation_id="get_index_page")
3842
async def index(request: Request):
3943
# Get all actions data for server-side rendering

‎app/templates/components/navbar.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,13 @@ <h1 class="text-xl font-black tracking-tight">
88
</a>
99
</h1>
1010
</div>
11-
<nav class="flex items-center gap-6">
11+
<nav class="flex items-center gap-3">
12+
<a
13+
href="/doc"
14+
class="bg-cyan-400 text-black border-2 border-black shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] font-semibold hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-2px] hover:translate-y-[-2px] active:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] active:translate-x-[1px] active:translate-y-[1px] transition-all px-3 py-1.5 text-sm"
15+
>
16+
How it works
17+
</a>
1218
<a
1319
href="https://github.com/coderamp-labs/gitrules"
1420
target="_blank"

‎app/templates/components/workspace_editor.html‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,10 @@ <h3 class="text-lg font-black text-black">Context editor</h3>
3939
</div>
4040

4141
<!-- Card content -->
42-
<div id="auto-share-panel" class="bg-pink-400 border-2 border-black shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] p-3 relative z-0 w-full" style="margin-top: -2px;">
43-
<div class="flex gap-2 items-center justify-center">
44-
<input id="share-link-input" type="text" readonly class="px-3 py-1 bg-white border-2 border-black text-black font-mono text-xs shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] focus:outline-none" style="min-width: 450px; cursor: text;" value="Waiting for first save...">
45-
<button id="copy-share-link" class="px-3 py-1 bg-cyan-400 border-2 border-black text-black font-bold shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-1px] hover:translate-y-[-1px] active:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] active:translate-x-[1px] active:translate-y-[1px] transition-all text-xs disabled:opacity-50 disabled:cursor-not-allowed" disabled>
42+
<div id="auto-share-panel" class="bg-pink-400 border-2 border-black shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] p-3 relative z-0 w-full" style="margin-top: -2px; overflow: hidden;">
43+
<div class="flex gap-2 items-center justify-center" style="min-width: 0;">
44+
<input id="share-link-input" type="text" readonly class="share-link-input px-3 py-1 bg-white border-2 border-black text-black font-mono text-xs shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] focus:outline-none" style="cursor: text;" value="Waiting for first save...">
45+
<button id="copy-share-link" class="flex-shrink-0 px-3 py-1 bg-cyan-400 border-2 border-black text-black font-bold shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-1px] hover:translate-y-[-1px] active:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] active:translate-x-[1px] active:translate-y-[1px] transition-all text-xs disabled:opacity-50 disabled:cursor-not-allowed" disabled>
4646
Copy
4747
</button>
4848
</div>
@@ -51,6 +51,24 @@ <h3 class="text-lg font-black text-black">Context editor</h3>
5151
</div>
5252
</div>
5353

54+
<style>
55+
/* Share link input responsive behavior */
56+
.share-link-input {
57+
width: 450px;
58+
min-width: 0;
59+
flex-shrink: 1;
60+
}
61+
62+
/* When container gets smaller, allow input to shrink */
63+
@media (max-width: 600px) {
64+
.share-link-input {
65+
width: auto;
66+
flex: 1;
67+
min-width: 200px;
68+
}
69+
}
70+
</style>
71+
5472
<!-- Tab switching for share panel -->
5573
<script>
5674
document.addEventListener('DOMContentLoaded', function() {

‎app/templates/docs.html‎

Lines changed: 268 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,268 @@
1+
{% extends "base.html" %}
2+
3+
{% block title %}Gitrules - How it works{% endblock %}
4+
5+
{% block content %}
6+
<div style="margin-top: -5rem; margin-left: -1rem; margin-right: -1rem;">
7+
<!-- Hero Section -->
8+
<div class="hero-gradient border-b-2 border-black" style="padding-top: 2rem;">
9+
<div class="max-w-4xl mx-auto px-6 py-12">
10+
<h1 class="text-4xl sm:text-5xl font-black mb-6">
11+
Supercharge Claude with<br>
12+
<span class="text-cyan-500">CLAUDE.md</span> files and more
13+
</h1>
14+
<p class="text-xl text-gray-700 mb-4">
15+
Create <strong>CLAUDE.md</strong>, <strong>.cursorrules</strong>, and agent files that tell Claude exactly how to work on your codebase.
16+
</p>
17+
<p class="text-lg text-gray-600 mb-8">
18+
Drop them into your repo with a single command. Plain files your team owns.
19+
</p>
20+
21+
<div class="flex flex-wrap gap-3">
22+
<div class="inline-block bg-cyan-50 border-2 border-cyan-400 px-4 py-2 shadow-[3px_3px_0px_0px_rgba(0,0,0,1)]">
23+
<span class="text-sm font-bold">📝 CLAUDE.md</span>
24+
<span class="text-sm ml-2">Project rules</span>
25+
</div>
26+
<div class="inline-block bg-pink-50 border-2 border-pink-400 px-4 py-2 shadow-[3px_3px_0px_0px_rgba(0,0,0,1)]">
27+
<span class="text-sm font-bold">🧠 .claude/agents/</span>
28+
<span class="text-sm ml-2">AI helpers</span>
29+
</div>
30+
<div class="inline-block bg-yellow-50 border-2 border-yellow-400 px-4 py-2 shadow-[3px_3px_0px_0px_rgba(0,0,0,1)]">
31+
<span class="text-sm font-bold">🔌 .mcp.json</span>
32+
<span class="text-sm ml-2">Claude plugins</span>
33+
</div>
34+
</div>
35+
</div>
36+
</div>
37+
38+
<!-- Main Content -->
39+
<div class="max-w-4xl mx-auto px-6 py-12">
40+
41+
<!-- Why This Matters -->
42+
<section class="docs-section p-6 mb-8">
43+
<h2 class="text-2xl font-black mb-4 flex items-center gap-2">
44+
<span class="text-pink-400">◆</span> Why this matters for Claude users
45+
</h2>
46+
<ul class="space-y-3 text-gray-700">
47+
<li class="flex items-start gap-2">
48+
<span class="text-cyan-400 mt-1">▸</span>
49+
<span>Claude & Claude Code automatically read <strong>CLAUDE.md</strong> files to understand your project's rules and conventions.</span>
50+
</li>
51+
<li class="flex items-start gap-2">
52+
<span class="text-cyan-400 mt-1">▸</span>
53+
<span>Today your instructions to Claude live in scattered chats and one-off prompts. Hard to share. Easy to lose.</span>
54+
</li>
55+
<li class="flex items-start gap-2">
56+
<span class="text-cyan-400 mt-1">▸</span>
57+
<span>Gitrules creates <strong>CLAUDE.md</strong> and other config files that make Claude work consistently for your whole team.</span>
58+
</li>
59+
</ul>
60+
</section>
61+
62+
<!-- How It Works -->
63+
<section class="docs-section p-6 mb-8">
64+
<h2 class="text-2xl font-black mb-6 flex items-center gap-2">
65+
<span class="text-cyan-400">◆</span> How it works
66+
</h2>
67+
68+
<div class="space-y-6">
69+
<div class="flex gap-4">
70+
<div class="flex-shrink-0 w-12 h-12 bg-pink-400 border-2 border-black flex items-center justify-center font-black shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]">
71+
1
72+
</div>
73+
<div>
74+
<h3 class="font-bold text-lg mb-2">Pick what you want</h3>
75+
<p class="text-gray-700">Choose from simple building blocks:</p>
76+
<ul class="mt-2 space-y-1 text-sm">
77+
<li><strong>Guidelines</strong> - your "house rules" for coding and reviews</li>
78+
<li><strong>Helpers</strong> - ready-made roles, like a "researcher" or "reviewer"</li>
79+
<li><strong>Add-ons</strong> - optional extras—think "plugins" your AI can use</li>
80+
</ul>
81+
</div>
82+
</div>
83+
84+
<div class="flex gap-4">
85+
<div class="flex-shrink-0 w-12 h-12 bg-cyan-400 border-2 border-black flex items-center justify-center font-black shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]">
86+
2
87+
</div>
88+
<div>
89+
<h3 class="font-bold text-lg mb-2">Tweak the text</h3>
90+
<p class="text-gray-700">Open and edit the wording directly on the page—like writing a checklist or a policy in plain English.</p>
91+
</div>
92+
</div>
93+
94+
<div class="flex gap-4">
95+
<div class="flex-shrink-0 w-12 h-12 bg-yellow-300 border-2 border-black flex items-center justify-center font-black shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]">
96+
3
97+
</div>
98+
<div>
99+
<h3 class="font-bold text-lg mb-2">Install in your repo</h3>
100+
<p class="text-gray-700">Copy one command. It creates the same files in your repository.</p>
101+
<p class="text-gray-700 mt-1">No black box. You can read, version, and edit everything.</p>
102+
</div>
103+
</div>
104+
</div>
105+
</section>
106+
107+
<!-- What Shows Up -->
108+
<section class="docs-section p-6 mb-8">
109+
<h2 class="text-2xl font-black mb-4 flex items-center gap-2">
110+
<span class="text-yellow-300">◆</span> Files Claude understands
111+
</h2>
112+
<div class="space-y-3">
113+
<div class="flex items-start gap-2">
114+
<span class="text-green-500 font-bold mt-1">✓</span>
115+
<div>
116+
<strong>CLAUDE.md</strong> - Your project's house rules
117+
<p class="text-gray-600 text-sm mt-1">Claude reads this automatically. Define coding standards, architecture patterns, and project-specific instructions.</p>
118+
</div>
119+
</div>
120+
<div class="flex items-start gap-2">
121+
<span class="text-green-500 font-bold mt-1">✓</span>
122+
<div>
123+
<strong>.claude/agents/*.yaml</strong> - Specialized AI helpers
124+
<p class="text-gray-600 text-sm mt-1">Give Claude different "modes" like researcher, reviewer, or debugger.</p>
125+
</div>
126+
</div>
127+
<div class="flex items-start gap-2">
128+
<span class="text-green-500 font-bold mt-1">✓</span>
129+
<div>
130+
<strong>.mcp.json</strong> - Claude Code plugins (MCPs)
131+
<p class="text-gray-600 text-sm mt-1">Add capabilities like database access, API integrations, and more.</p>
132+
</div>
133+
</div>
134+
</div>
135+
<div class="mt-4 p-3 bg-cyan-100 border-2 border-cyan-400">
136+
<p class="text-sm">🎯 <strong>Claude Code reads these automatically:</strong> Just drop them in your repo and Claude instantly follows your rules.</p>
137+
</div>
138+
</section>
139+
140+
<!-- Example Flows -->
141+
<section class="mb-8">
142+
<h2 class="text-2xl font-black mb-6">Simple example flows</h2>
143+
144+
<div class="grid gap-4 md:grid-cols-2">
145+
<div class="example-flow p-4">
146+
<h3 class="font-bold mb-3">A. "Make our AI code reviews consistent"</h3>
147+
<ol class="space-y-2 text-sm">
148+
<li>1. Add a <strong>Code Quality</strong> bundle.</li>
149+
<li>2. Skim the checklist; edit anything in plain English.</li>
150+
<li>3. Install.</li>
151+
</ol>
152+
<p class="text-sm text-gray-600 mt-3 pt-3 border-t border-gray-300">
153+
→ Now everyone's AI uses the same review standards.
154+
</p>
155+
</div>
156+
157+
<div class="example-flow p-4">
158+
<h3 class="font-bold mb-3">B. "Give our AI a researcher persona"</h3>
159+
<ol class="space-y-2 text-sm">
160+
<li>1. Add a <strong>Researcher</strong> helper.</li>
161+
<li>2. Personalize the brief ("be concise," "cite sources," etc.).</li>
162+
<li>3. Install.</li>
163+
</ol>
164+
<p class="text-sm text-gray-600 mt-3 pt-3 border-t border-gray-300">
165+
→ Your AI now has a reusable, team-wide "research mode."
166+
</p>
167+
</div>
168+
</div>
169+
</section>
170+
171+
<!-- Safety & Control -->
172+
<section class="docs-section p-6 mb-8">
173+
<h2 class="text-2xl font-black mb-4 flex items-center gap-2">
174+
<span class="text-green-500">◆</span> Safety & control
175+
</h2>
176+
<div class="grid gap-4 md:grid-cols-3">
177+
<div class="text-center">
178+
<div class="text-3xl mb-2">🛡️</div>
179+
<h3 class="font-bold mb-1">You stay in charge</h3>
180+
<p class="text-sm text-gray-600">Nothing touches your repo until you run the command.</p>
181+
</div>
182+
<div class="text-center">
183+
<div class="text-3xl mb-2">👁️</div>
184+
<h3 class="font-bold mb-1">Inspect first</h3>
185+
<p class="text-sm text-gray-600">All content is visible before you install.</p>
186+
</div>
187+
<div class="text-center">
188+
<div class="text-3xl mb-2">↩️</div>
189+
<h3 class="font-bold mb-1">Easy to undo</h3>
190+
<p class="text-sm text-gray-600">It's just files—use Git like always.</p>
191+
</div>
192+
</div>
193+
</section>
194+
195+
<!-- Who It's For -->
196+
<section class="docs-section p-6 mb-8">
197+
<h2 class="text-2xl font-black mb-4 flex items-center gap-2">
198+
<span class="text-purple-500">◆</span> Who it's for
199+
</h2>
200+
<div class="space-y-3">
201+
<div class="p-3 bg-cyan-50 border-l-4 border-cyan-400">
202+
<strong>Developers</strong> who want predictable AI help across projects.
203+
</div>
204+
<div class="p-3 bg-pink-50 border-l-4 border-pink-400">
205+
<strong>Team leads</strong> who want shared standards the AI actually follows.
206+
</div>
207+
<div class="p-3 bg-yellow-50 border-l-4 border-yellow-400">
208+
<strong>Newcomers</strong> who want results without learning prompt jargon.
209+
</div>
210+
</div>
211+
</section>
212+
213+
<!-- FAQ -->
214+
<section class="mb-8">
215+
<h2 class="text-2xl font-black mb-6">FAQ</h2>
216+
217+
<div class="space-y-4">
218+
<div class="faq-item pl-4 py-3">
219+
<h3 class="font-bold mb-2">Do I need to know anything about "AI agents" or "MCPs"?</h3>
220+
<p class="text-gray-700">No. You'll pick items with friendly names and edit normal text. The site handles the wiring.</p>
221+
</div>
222+
223+
<div class="faq-item pl-4 py-3">
224+
<h3 class="font-bold mb-2">What if our needs change?</h3>
225+
<p class="text-gray-700">Edit the files in your repo. Reinstall, or just commit changes like any document.</p>
226+
</div>
227+
228+
<div class="faq-item pl-4 py-3">
229+
<h3 class="font-bold mb-2">Will this lock us in?</h3>
230+
<p class="text-gray-700">No. The output is regular text files you own.</p>
231+
</div>
232+
</div>
233+
</section>
234+
235+
</div>
236+
</div>
237+
238+
{% endblock %}
239+
240+
{% block styles %}
241+
<style>
242+
/* Override base template gradient for docs page */
243+
body {
244+
background: #f9fafb !important;
245+
}
246+
.docs-section {
247+
background: white;
248+
border: 2px solid black;
249+
box-shadow: 4px 4px 0px 0px rgba(0,0,0,1);
250+
transition: all 150ms ease;
251+
}
252+
.docs-section:hover {
253+
box-shadow: 6px 6px 0px 0px rgba(0,0,0,1);
254+
transform: translate(-1px, -1px);
255+
}
256+
.faq-item {
257+
border-left: 4px solid #F472B6;
258+
}
259+
.example-flow {
260+
background: #FCE7F3;
261+
border: 2px solid black;
262+
box-shadow: 3px 3px 0px 0px rgba(0,0,0,1);
263+
}
264+
.hero-gradient {
265+
background: linear-gradient(135deg, #ECFEFF 0%, #FCE7F3 100%);
266+
}
267+
</style>
268+
{% endblock %}

0 commit comments

Comments
 (0)