1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{relay_name}</title>
<style>
{base_css}
.hero {{
height: 100vh;
padding: 4rem 24px 3rem;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}}
.hero-content {{
max-width: 720px;
width: 100%;
}}
.header {{
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-bottom: 24px;
}}
.logo {{
width: 48px;
height: 48px;
}}
h1 {{
font-size: 2rem;
font-weight: 600;
letter-spacing: -0.02em;
}}
.subtitle {{
color: var(--text-muted);
font-size: 1.125rem;
}}
.scroll-indicator {{
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
}}
.scroll-down {{
display: flex;
flex-direction: column;
align-items: center;
animation: float 2s ease-in-out infinite;
text-decoration: none;
}}
.scroll-text {{
font-size: 0.8rem;
opacity: 0.7;
margin-bottom: 4px;
}}
@keyframes float {{
0%, 100% {{
transform: translateY(0);
}}
50% {{
transform: translateY(-8px);
}}
}}
.scroll-down svg {{
fill: none;
stroke: currentColor;
opacity: 0.8;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}}
.scroll-down:hover svg {{
opacity: 1;
transform: scale(1.2);
stroke-width: 2.5;
}}
.scroll-down:hover .scroll-text {{
opacity: 1;
}}
.container {{
max-width: 720px;
margin: 0 auto;
padding: 80px 24px;
}}
.section {{
margin-bottom: 40px;
}}
.section-title {{
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--brand);
margin-bottom: 16px;
}}
.card {{
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px;
}}
.card + .card {{
margin-top: 12px;
}}
.card-title {{
font-weight: 500;
margin-bottom: 4px;
}}
.card-desc {{
color: var(--text-muted);
font-size: 0.875rem;
}}
.badge {{
display: inline-block;
background: var(--brand);
color: white;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 500;
margin-right: 8px;
}}
code {{ padding: 2px 8px; }}
.tag-container {{
margin: 24px 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
justify-content: center;
}}
.tag-label {{
font-size: 0.75rem;
color: var(--text-muted);
margin-right: 4px;
}}
.tag {{
display: inline-block;
padding: 4px 10px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 500;
}}
.tag-grasp {{
background: rgba(68, 52, 255, 0.15);
color: var(--brand-light);
border: 1px solid rgba(68, 52, 255, 0.3);
}}
.tag-nip {{
background: rgba(34, 197, 94, 0.15);
color: var(--success);
border: 1px solid rgba(34, 197, 94, 0.3);
}}
.browse-link {{
display: inline-block;
background: var(--brand);
color: white;
padding: 14px 24px;
border-radius: 8px;
font-weight: 500;
font-size: 1rem;
margin: 32px 0;
transition: background 0.2s;
}}
.browse-link:hover {{
background: var(--brand-light);
text-decoration: none;
}}
.footer {{ margin-top: 64px; }}
</style>
</head>
<body>
<header class="hero">
<div class="hero-content">
<div class="header">
<h1>{relay_name}</h1>
</div>
<p class="subtitle">{relay_description}</p>
<a id="browse-link" href="https://gitworkshop.dev" class="browse-link" target="_blank">
Browse Repositories on GitWorkshop.dev →
</a>
<div class="tag-container">
<span class="tag-label">Supports:</span>
<span class="tag tag-grasp">GRASP-01</span>
<span class="tag tag-nip">NIP-01</span>
<span class="tag tag-nip">NIP-11</span>
<span class="tag tag-nip">NIP-34</span>
</div>
<div class="card">
<div class="software-box">
<svg class="software-logo" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="38" height="38" rx="12" fill="#4434FF"/>
<path d="M10.6731 30.6348C8.83687 30.6346 7.34885 29.1458 7.34885 27.3096C7.34891 26.2473 7.84783 25.303 8.62326 24.6943C8.21265 23.3055 7.86571 22.049 7.45334 20.6758C6.90247 18.8412 7.4492 16.8197 8.93576 15.5605L15.7512 9.78906C15.6931 9.54286 15.6614 9.28642 15.6613 9.02246C15.6613 7.51617 16.6628 6.24465 18.0363 5.83594L18.0363 -1.11215e-06C18.511 0.000462658 18.4612 0.000975391 18.9856 0.000975533C19.5102 0.000975578 19.5802 -1.11589e-06 19.9367 -9.46012e-07L19.9367 5.83594C21.3097 6.24503 22.3108 7.5166 22.3108 9.02246C22.3107 9.29118 22.2792 9.55249 22.219 9.80273L29.0783 15.6123C30.5229 16.8359 31.1022 18.8013 30.5539 20.6133L29.3254 24.6758C30.1142 25.2837 30.6232 26.2367 30.6233 27.3096C30.6233 29.1459 29.1344 30.6348 27.2981 30.6348C25.4619 30.6346 23.9738 29.1458 23.9738 27.3096C23.974 25.4734 25.4619 23.9846 27.2981 23.9844C27.3814 23.9844 27.4643 23.9891 27.5461 23.9951L28.7356 20.0625C29.0645 18.9753 28.7166 17.7966 27.8498 17.0625L21.2424 11.4648C20.8746 11.8048 20.4294 12.0622 19.9367 12.209L19.9367 18.9258C21.0425 19.3175 21.836 20.3694 21.8362 21.6094C21.8362 23.1834 20.5596 24.46 18.9856 24.46C17.4117 24.4598 16.136 23.1833 16.136 21.6094C16.1361 20.3689 16.93 19.3172 18.0363 18.9258L18.0363 12.21C17.5395 12.0622 17.0916 11.801 16.7219 11.457L10.1643 17.0107C9.27919 17.7605 8.93068 18.9867 9.27365 20.1289C9.68708 21.5056 10.0175 22.7009 10.3986 23.998C10.4892 23.9906 10.5806 23.9844 10.6731 23.9844C12.5093 23.9844 13.9981 25.4733 13.9983 27.3096C13.9983 29.1459 12.5094 30.6348 10.6731 30.6348Z" fill="white"/>
</svg>
<div class="software-content">
<h3 class="software-heading"><a href="https://gitworkshop.dev/danconwaydev.com/ngit-grasp">Grasp Server</a> Powered by <a href="https://gitworkshop.dev/danconwaydev.com/ngit-grasp">ngit-grasp</a></h3>
<p class="software-desc">Git hosting distributed across relays using Nostr for authorization. <a href="https://ngit.dev/grasp">Find out more...</a></p>
</div>
</div>
</div>
</div>
<div class="scroll-indicator">
<a href="#content" class="scroll-down" aria-label="Scroll to content">
<span class="scroll-text">SCROLL</span>
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="7 13 12 18 17 13"></polyline>
<polyline points="7 6 12 11 17 6"></polyline>
</svg>
</a>
</div>
</header>
<main class="container" id="content">
<div class="section">
<div class="section-title">Supported GRASPs</div>
<div class="card">
<div class="card-title"><span class="badge">GRASP-01</span>Nostr Authorised HTTP Git Server</div>
<div class="card-desc">with embedded Nostr Relay</div>
</div>
</div>
<div class="section">
<div class="section-title">Supported NIPs</div>
<div class="card">
<div class="card-title"><span class="badge">NIP-01</span> Basic Protocol</div>
<div class="card-desc">Core Nostr protocol flow and event structure</div>
</div>
<div class="card">
<div class="card-title"><span class="badge">NIP-11</span> Relay Information</div>
<div class="card-desc">Relay metadata and capabilities document</div>
</div>
<div class="card">
<div class="card-title"><span class="badge">NIP-34</span> Git Events</div>
<div class="card-desc">Repository announcements and state tracking</div>
</div>
</div>
<div class="footer">
Powered by <a href="https://gitworkshop.dev/danconwaydev.com/ngit-grasp"><strong>ngit-grasp</strong></a>
</div>
</main>
<script>
// Detect protocol and construct gitworkshop relay link
const protocol = window.location.protocol; // 'http:' or 'https:'
const host = window.location.host; // 'domain.com' or 'domain.com:port'
// For http, use ws:// prefix and URL encode; for https, just use host (implies wss://)
let relayref = host;
if (protocol === 'http:') relayref = encodeURIComponent("ws://" + host);
// Update the browse link to point to the relay on gitworkshop
const browseLink = document.getElementById('browse-link');
browseLink.setAttribute('href', 'https://gitworkshop.dev/relay/' + relayref);
</script>
</body>
</html>
|