my own indieAuth provider!
indiko.dunkirk.sh/docs
indieauth
oauth2-server
feat: add an example button
+175
+81
src/client/docs.ts
+81
src/client/docs.ts
···
41
41
const resultSection = document.getElementById('resultSection') as HTMLElement;
42
42
const resultDiv = document.getElementById('result') as HTMLElement;
43
43
const copyMarkdownBtn = document.getElementById('copyMarkdownBtn') as HTMLButtonElement;
44
+
const copyButtonCodeBtn = document.getElementById('copyButtonCode') as HTMLButtonElement;
45
+
const demoButton = document.getElementById('demoButton') as HTMLAnchorElement;
44
46
45
47
// Auto-fill redirect URI with current page URL
46
48
const currentUrl = window.location.origin + window.location.pathname;
···
388
390
alert('Failed to copy to clipboard');
389
391
}
390
392
});
393
+
394
+
// Copy button code to clipboard
395
+
copyButtonCodeBtn.addEventListener('click', async () => {
396
+
const buttonCode = `<!-- Add Google Fonts to your <head> -->
397
+
<link rel="preconnect" href="https://fonts.googleapis.com">
398
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
399
+
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap" rel="stylesheet">
400
+
401
+
<!-- Button HTML -->
402
+
<a href="YOUR_OAUTH_URL_HERE" class="indiko-button">
403
+
Sign in with Indiko
404
+
</a>
405
+
406
+
<style>
407
+
.indiko-button {
408
+
position: relative;
409
+
display: inline-block;
410
+
padding: 1rem 2rem;
411
+
background: #ab4967;
412
+
color: #d9d0de;
413
+
border: 4px solid #26242b;
414
+
font-size: 1rem;
415
+
font-weight: 700;
416
+
text-decoration: none;
417
+
font-family: 'Space Grotesk', sans-serif;
418
+
text-transform: uppercase;
419
+
letter-spacing: 0.1rem;
420
+
box-shadow: 6px 6px 0 #26242b;
421
+
transition: all 0.15s ease;
422
+
}
423
+
424
+
.indiko-button::before {
425
+
content: '';
426
+
position: absolute;
427
+
top: -4px;
428
+
left: -4px;
429
+
right: -4px;
430
+
bottom: -4px;
431
+
background: transparent;
432
+
border: 4px solid #a04668;
433
+
pointer-events: none;
434
+
transition: all 0.15s ease;
435
+
}
436
+
437
+
.indiko-button:hover {
438
+
transform: translate(3px, 3px);
439
+
box-shadow: 3px 3px 0 #26242b;
440
+
}
441
+
442
+
.indiko-button:hover::before {
443
+
top: -7px;
444
+
left: -7px;
445
+
right: -7px;
446
+
bottom: -7px;
447
+
}
448
+
449
+
.indiko-button:active {
450
+
transform: translate(6px, 6px);
451
+
box-shadow: 0 0 0 #26242b;
452
+
}
453
+
</style>`;
454
+
455
+
try {
456
+
await navigator.clipboard.writeText(buttonCode);
457
+
copyButtonCodeBtn.textContent = 'copied! ✓';
458
+
setTimeout(() => {
459
+
copyButtonCodeBtn.textContent = 'copy button code';
460
+
}, 2000);
461
+
} catch (error) {
462
+
console.error('Failed to copy:', error);
463
+
alert('Failed to copy to clipboard');
464
+
}
465
+
});
466
+
467
+
// Add interactive hover effect to demo button
468
+
demoButton.addEventListener('click', (e) => {
469
+
e.preventDefault();
470
+
});
471
+
+94
src/html/docs.html
+94
src/html/docs.html
···
484
484
<ul>
485
485
<li><a href="#overview">overview</a></li>
486
486
<li><a href="#getting-started">getting started</a></li>
487
+
<li><a href="#button">sign in button</a></li>
487
488
<li><a href="#endpoints">endpoints</a></li>
488
489
<li><a href="#authorization">authorization flow</a></li>
489
490
<li><a href="#scopes">scopes</a></li>
···
543
544
<li>Authorize apps to access your profile</li>
544
545
<li>Manage app permissions from your dashboard</li>
545
546
</ul>
547
+
</section>
548
+
549
+
<section id="button" class="section">
550
+
<h2>sign in button</h2>
551
+
<p>
552
+
Copy this themed button for your app's login page. It matches Indiko's visual style:
553
+
</p>
554
+
555
+
<div style="background: rgba(12, 23, 19, 0.6); padding: 2rem; margin: 1.5rem 0; display: flex; justify-content: center;">
556
+
<a href="#" id="demoButton" style="
557
+
position: relative;
558
+
display: inline-block;
559
+
padding: 1rem 2rem;
560
+
background: #ab4967;
561
+
color: #d9d0de;
562
+
border: 4px solid #26242b;
563
+
font-size: 1rem;
564
+
font-weight: 700;
565
+
text-decoration: none;
566
+
font-family: 'Space Grotesk', sans-serif;
567
+
text-transform: uppercase;
568
+
letter-spacing: 0.1rem;
569
+
box-shadow: 6px 6px 0 #26242b;
570
+
transition: all 0.15s ease;
571
+
">Sign in with Indiko</a>
572
+
</div>
573
+
574
+
<h3>HTML + CSS</h3>
575
+
<pre><code><!-- Add Google Fonts to your <head> -->
576
+
<link rel="preconnect" href="https://fonts.googleapis.com">
577
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
578
+
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap" rel="stylesheet">
579
+
580
+
<!-- Button HTML -->
581
+
<a href="YOUR_OAUTH_URL_HERE" class="indiko-button">
582
+
Sign in with Indiko
583
+
</a>
584
+
585
+
<style>
586
+
.indiko-button {
587
+
position: relative;
588
+
display: inline-block;
589
+
padding: 1rem 2rem;
590
+
background: #ab4967;
591
+
color: #d9d0de;
592
+
border: 4px solid #26242b;
593
+
font-size: 1rem;
594
+
font-weight: 700;
595
+
text-decoration: none;
596
+
font-family: 'Space Grotesk', sans-serif;
597
+
text-transform: uppercase;
598
+
letter-spacing: 0.1rem;
599
+
box-shadow: 6px 6px 0 #26242b;
600
+
transition: all 0.15s ease;
601
+
}
602
+
603
+
.indiko-button::before {
604
+
content: '';
605
+
position: absolute;
606
+
top: -4px;
607
+
left: -4px;
608
+
right: -4px;
609
+
bottom: -4px;
610
+
background: transparent;
611
+
border: 4px solid #a04668;
612
+
pointer-events: none;
613
+
transition: all 0.15s ease;
614
+
}
615
+
616
+
.indiko-button:hover {
617
+
transform: translate(3px, 3px);
618
+
box-shadow: 3px 3px 0 #26242b;
619
+
}
620
+
621
+
.indiko-button:hover::before {
622
+
top: -7px;
623
+
left: -7px;
624
+
right: -7px;
625
+
bottom: -7px;
626
+
}
627
+
628
+
.indiko-button:active {
629
+
transform: translate(6px, 6px);
630
+
box-shadow: 0 0 0 #26242b;
631
+
}
632
+
</style></code></pre>
633
+
634
+
<button id="copyButtonCode" class="copy-btn">copy button code</button>
635
+
636
+
<div class="info-box">
637
+
<strong>Customization:</strong>
638
+
Replace <code>YOUR_OAUTH_URL_HERE</code> with your authorization URL (see <a href="#authorization">authorization flow</a> below). You can also change the button text or adjust colors to match your app's theme.
639
+
</div>
546
640
</section>
547
641
548
642
<section id="endpoints" class="section">