heaths.dev
forked from
stevedylan.dev/sequoia
A CLI for publishing standard.site documents to ATProto
Subscribe UI improvements
+17
-23
+17
-23
docs/src/routes/subscribe.ts
+17
-23
docs/src/routes/subscribe.ts
···
215
215
<p class="vocs_Paragraph">Enter your Bluesky handle to subscribe to this publication.</p>
216
216
${errorHtml}
217
217
<form method="POST" action="/subscribe/login">
218
-
<input type="hidden" name="publicationUri" value="${escapeHtml(publicationUri)}" />
219
-
<label>
220
-
Bluesky handle
221
-
<input
222
-
type="text"
223
-
name="handle"
224
-
placeholder="you.bsky.social"
225
-
autocomplete="username"
226
-
required
227
-
autofocus
228
-
/>
229
-
</label>
218
+
<input type="hidden" name="publicationUri" value="${escapeHtml(publicationUri)}" />
219
+
<input
220
+
type="text"
221
+
name="handle"
222
+
placeholder="you.bsky.social"
223
+
autocomplete="username"
224
+
required
225
+
autofocus
226
+
/>
230
227
<button type="submit" class="vocs_Button_button vocs_Button_button_accent">Continue on Bluesky</button>
231
228
</form>
232
229
`, styleHref);
···
241
238
const msg = existing
242
239
? "You're already subscribed to this publication."
243
240
: "You've successfully subscribed!";
241
+
const escapedPublicationUri = escapeHtml(publicationUri);
242
+
const escapedRecordUri = escapeHtml(recordUri);
244
243
return page(`
245
244
<h1 class="vocs_H1 vocs_Heading">Subscribed ✓</h1>
246
245
<p class="vocs_Paragraph">${msg}</p>
247
-
<p class="vocs_Paragraph"><small>Publication: <code class="vocs_Code">${escapeHtml(publicationUri)}</code></small></p>
248
-
<p class="vocs_Paragraph"><small>Record: <code class="vocs_Code">${escapeHtml(recordUri)}</code></small></p>
246
+
<p class="vocs_Paragraph"><small>Publication: <code class="vocs_Code"><a href="https://pds.ls/${escapedPublicationUri}">${escapedPublicationUri}</a></code></small></p>
247
+
<p class="vocs_Paragraph"><small>Record: <code class="vocs_Code"><a href="https://pds.ls/${escapedRecordUri}">${escapedRecordUri}</a></code></small></p>
249
248
`, styleHref);
250
249
}
251
250
···
264
263
<script>if(window.matchMedia('(prefers-color-scheme: dark)').matches)document.documentElement.classList.add('dark')</script>
265
264
<style>
266
265
.page-container {
267
-
max-width: 480px;
266
+
max-width: calc(var(--vocs-content_width, 480px) / 1.6);
268
267
margin: 4rem auto;
269
268
padding: 0 var(--vocs-space_20, 1.25rem);
270
269
}
271
270
.vocs_Heading { margin-bottom: var(--vocs-space_12, .75rem); }
272
271
.vocs_Paragraph { margin-bottom: var(--vocs-space_16, 1rem); }
273
-
label {
274
-
display: flex;
275
-
flex-direction: column;
276
-
gap: var(--vocs-space_6, .375rem);
277
-
margin-bottom: var(--vocs-space_20, 1.25rem);
278
-
font-weight: var(--vocs-fontWeight_medium, 400);
279
-
font-size: var(--vocs-fontSize_15, .9375rem);
280
-
}
281
272
input[type="text"] {
282
273
padding: var(--vocs-space_8, .5rem) var(--vocs-space_12, .75rem);
283
274
border: 1px solid var(--vocs-color_border, #D5D1C8);
284
275
border-radius: var(--vocs-borderRadius_6, 6px);
276
+
margin-bottom: var(--vocs-space_20, 1.25rem);
277
+
min-width: 30vh;
278
+
width: 100%;
285
279
font-size: var(--vocs-fontSize_16, 1rem);
286
280
font-family: inherit;
287
281
background: var(--vocs-color_background, #F5F3EF);