Skip to content

Commit e30bb8f

Browse files
FreekHeijtingclaude
FreekHeijting
and
claude
committed
chore: add v2.0 social preview banner + repo rename
- Social preview banner HTML (1280x640, Frappe blue/green/purple theme) - Repository renamed: ERPNext_Anthropic_Claude_Development_Skill_Package -> Frappe_Claude_Skill_Package - GitHub auto-redirect active for old URL Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent e0c2721 commit e30bb8f

1 file changed

Lines changed: 287 additions & 0 deletions

File tree

‎docs/social-preview-banner.html‎

Lines changed: 287 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,287 @@
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>Social Preview Banner — Frappe Framework Skill Package</title>
7+
<style>
8+
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
9+
10+
* { margin: 0; padding: 0; box-sizing: border-box; }
11+
12+
body {
13+
background: #1A1A2E;
14+
display: flex;
15+
align-items: center;
16+
justify-content: center;
17+
min-height: 100vh;
18+
}
19+
20+
.banner {
21+
width: 1280px;
22+
height: 640px;
23+
background: #1A1A2E;
24+
position: relative;
25+
overflow: hidden;
26+
display: flex;
27+
}
28+
29+
/* Brand gradient top strip */
30+
.top-strip {
31+
position: absolute;
32+
top: 0;
33+
left: 0;
34+
right: 0;
35+
height: 4px;
36+
background: linear-gradient(90deg, #0089FF 0%, #00D4AA 50%, #7C3AED 100%);
37+
}
38+
39+
/* Subtle blueprint grid */
40+
.banner::before {
41+
content: '';
42+
position: absolute;
43+
inset: 0;
44+
background-image:
45+
linear-gradient(rgba(250,250,249,0.02) 1px, transparent 1px),
46+
linear-gradient(90deg, rgba(250,250,249,0.02) 1px, transparent 1px);
47+
background-size: 30px 30px;
48+
pointer-events: none;
49+
}
50+
51+
/* Left content */
52+
.left {
53+
position: relative;
54+
z-index: 1;
55+
width: 50%;
56+
padding: 72px 40px 56px 72px;
57+
display: flex;
58+
flex-direction: column;
59+
justify-content: center;
60+
}
61+
62+
.number {
63+
font-family: 'Space Grotesk', system-ui, sans-serif;
64+
font-size: 140px;
65+
font-weight: 700;
66+
color: #FAFAF9;
67+
line-height: 0.85;
68+
letter-spacing: -0.02em;
69+
margin-bottom: 10px;
70+
}
71+
72+
.title {
73+
font-family: 'Space Grotesk', system-ui, sans-serif;
74+
font-size: 26px;
75+
font-weight: 700;
76+
color: #0089FF;
77+
letter-spacing: 4px;
78+
text-transform: uppercase;
79+
margin-bottom: 22px;
80+
}
81+
82+
.subtitle {
83+
font-family: 'Inter', system-ui, sans-serif;
84+
font-size: 17px;
85+
color: #A1A1AA;
86+
font-weight: 400;
87+
margin-bottom: 30px;
88+
line-height: 1.5;
89+
}
90+
91+
/* Technology badges — ghost style per brand */
92+
.badges {
93+
display: flex;
94+
gap: 12px;
95+
margin-bottom: 32px;
96+
flex-wrap: wrap;
97+
}
98+
99+
.badge {
100+
font-family: 'Inter', system-ui, sans-serif;
101+
padding: 8px 20px;
102+
border-radius: 8px;
103+
font-size: 13px;
104+
font-weight: 600;
105+
background: transparent;
106+
border: 2px solid;
107+
}
108+
109+
.badge-1 { border-color: #0089FF; color: #0089FF; }
110+
.badge-2 { border-color: #00D4AA; color: #00D4AA; }
111+
.badge-3 { border-color: #7C3AED; color: #7C3AED; }
112+
113+
.versions {
114+
font-family: 'JetBrains Mono', monospace;
115+
font-size: 12px;
116+
font-weight: 500;
117+
color: #A1A1AA;
118+
letter-spacing: 0.05em;
119+
display: flex;
120+
gap: 10px;
121+
align-items: center;
122+
}
123+
124+
.versions .sep {
125+
color: rgba(250,250,249,0.1);
126+
}
127+
128+
/* Right code window */
129+
.right {
130+
position: relative;
131+
z-index: 1;
132+
width: 50%;
133+
padding: 56px 56px 56px 16px;
134+
display: flex;
135+
align-items: center;
136+
}
137+
138+
.code-window {
139+
width: 100%;
140+
background: rgba(54, 54, 62, 0.8);
141+
border: 1px solid rgba(250,250,249,0.06);
142+
border-radius: 12px;
143+
overflow: hidden;
144+
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3);
145+
max-height: 100%;
146+
}
147+
148+
.code-window * {
149+
overflow: hidden;
150+
}
151+
152+
.code-titlebar {
153+
background: rgba(42, 42, 50, 0.95);
154+
padding: 12px 16px;
155+
display: flex;
156+
align-items: center;
157+
gap: 8px;
158+
border-bottom: 1px solid rgba(250,250,249,0.04);
159+
}
160+
161+
.dot { width: 12px; height: 12px; border-radius: 50%; }
162+
.dot-red { background: #DC2626; }
163+
.dot-yellow { background: #F59E0B; }
164+
.dot-green { background: #16A34A; }
165+
166+
.code-filename {
167+
color: #A1A1AA;
168+
font-size: 13px;
169+
font-family: 'JetBrains Mono', monospace;
170+
font-weight: 500;
171+
margin-left: auto;
172+
margin-right: auto;
173+
}
174+
175+
.code-body {
176+
padding: 20px 24px;
177+
font-family: 'JetBrains Mono', monospace;
178+
font-size: 13px;
179+
line-height: 1.7;
180+
color: #FAFAF9;
181+
}
182+
183+
.comment { color: #A1A1AA; }
184+
.keyword { color: #0089FF; }
185+
.function { color: #00D4AA; }
186+
.string { color: #34D399; }
187+
.operator { color: #7C3AED; }
188+
.type { color: #3178C6; }
189+
.cursor {
190+
display: inline-block;
191+
width: 8px;
192+
height: 17px;
193+
background: #0089FF;
194+
vertical-align: text-bottom;
195+
}
196+
197+
/* Foundation branding bottom-right */
198+
.foundation {
199+
position: absolute;
200+
bottom: 28px;
201+
right: 44px;
202+
text-align: right;
203+
z-index: 1;
204+
}
205+
206+
.foundation-name {
207+
font-family: 'Space Grotesk', system-ui, sans-serif;
208+
font-size: 18px;
209+
font-weight: 700;
210+
letter-spacing: 0.5px;
211+
}
212+
213+
.foundation-name .open { color: #FAFAF9; }
214+
.foundation-name .aec { color: #0089FF; }
215+
216+
.foundation-sub {
217+
font-family: 'Inter', system-ui, sans-serif;
218+
font-size: 11px;
219+
color: #A1A1AA;
220+
font-weight: 500;
221+
letter-spacing: 1px;
222+
}
223+
</style>
224+
</head>
225+
<body>
226+
<div class="banner">
227+
<div class="top-strip"></div>
228+
229+
<!-- Left: text content -->
230+
<div class="left">
231+
<div class="number">53</div>
232+
<div class="title">Deterministic Skills</div>
233+
<div class="subtitle">for Frappe Framework &amp; ERPNext<br>development and operations</div>
234+
235+
<div class="badges">
236+
<div class="badge badge-1">Frappe v14-v16</div>
237+
<div class="badge badge-2">7 Categories</div>
238+
<div class="badge badge-3">Claude AI</div>
239+
</div>
240+
241+
<div class="versions">
242+
v2.0.0 <span class="sep">|</span> MIT License <span class="sep">|</span> 85% Coverage
243+
</div>
244+
</div>
245+
246+
<!-- Right: code window -->
247+
<div class="right">
248+
<div class="code-window">
249+
<div class="code-titlebar">
250+
<div class="dot dot-red"></div>
251+
<div class="dot dot-yellow"></div>
252+
<div class="dot dot-green"></div>
253+
<span class="code-filename">controller.py</span>
254+
</div>
255+
<div class="code-body">
256+
<span class="comment"># frappe-syntax-controllers</span><br>
257+
<span class="keyword">class</span> <span class="function">SalesInvoice</span>(<span class="type">Document</span>):<br>
258+
<br>
259+
&nbsp;&nbsp;<span class="keyword">def</span> <span class="function">validate</span>(<span class="type">self</span>):<br>
260+
&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment"># ALWAYS validate before save</span><br>
261+
&nbsp;&nbsp;&nbsp;&nbsp;<span class="type">self</span>.<span class="function">validate_qty</span>()<br>
262+
&nbsp;&nbsp;&nbsp;&nbsp;<span class="type">self</span>.<span class="function">calculate_totals</span>()<br>
263+
<br>
264+
&nbsp;&nbsp;<span class="keyword">def</span> <span class="function">on_submit</span>(<span class="type">self</span>):<br>
265+
&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment"># Update stock ledger</span><br>
266+
&nbsp;&nbsp;&nbsp;&nbsp;<span class="type">self</span>.<span class="function">update_stock</span>()<br>
267+
&nbsp;&nbsp;&nbsp;&nbsp;frappe.<span class="function">publish_realtime</span>(<br>
268+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="string">"invoice_submitted"</span><br>
269+
&nbsp;&nbsp;&nbsp;&nbsp;)<br>
270+
<br>
271+
&nbsp;&nbsp;<span class="operator">@</span>frappe.<span class="function">whitelist</span>()<br>
272+
&nbsp;&nbsp;<span class="keyword">def</span> <span class="function">get_dashboard</span>(<span class="type">self</span>):<br>
273+
&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">return</span> frappe.db.<span class="function">get_all</span>(<br>
274+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="string">"Payment Entry"</span><br>
275+
&nbsp;&nbsp;&nbsp;&nbsp;)<span class="cursor"></span>
276+
</div>
277+
</div>
278+
</div>
279+
280+
<!-- Foundation brand -->
281+
<div class="foundation">
282+
<div class="foundation-name"><span class="open">Open</span><span class="aec">AEC</span></div>
283+
<div class="foundation-sub">Foundation</div>
284+
</div>
285+
</div>
286+
</body>
287+
</html>

0 commit comments

Comments
 (0)