web components for a integrable atproto based guestbook
nekomimi.pet
1<script lang="ts">
2 import type { GuestbookDisplayElement } from './components/guestbook-display';
3
4 function handleSignCreated(event: CustomEvent) {
5 console.log('New signature created:', event.detail);
6 // refresh the display
7 const display = document.querySelector('guestbook-display') as GuestbookDisplayElement;
8 if (display) {
9 display.refresh();
10 }
11 }
12</script>
13
14<main>
15 <header>
16 <h1>Guestbook</h1>
17 <p class="subtitle">Leave your thoughts and memories. Thanks for visiting!</p>
18 </header>
19
20 <div class="components">
21 <guestbook-sign
22 did="did:plc:ttdrpj45ibqunmfhdsb4zdwq"
23 onsign-created={handleSignCreated}>
24 </guestbook-sign>
25
26 <guestbook-display
27 did="did:plc:ttdrpj45ibqunmfhdsb4zdwq"
28 limit="50">
29 </guestbook-display>
30 </div>
31</main>
32
33<style>
34 main {
35 max-width: 1200px;
36 margin: 0 auto;
37 padding: 48px 24px;
38 }
39
40 header {
41 margin-bottom: 48px;
42 }
43
44 h1 {
45 font-size: 48px;
46 font-weight: 700;
47 margin: 0 0 12px 0;
48 color: #000;
49 }
50
51 .subtitle {
52 font-size: 18px;
53 color: #6b7280;
54 margin: 0;
55 }
56
57 .components {
58 display: grid;
59 grid-template-columns: 1fr 1fr;
60 gap: 48px;
61 align-items: start;
62 }
63
64 @media (max-width: 768px) {
65 .components {
66 grid-template-columns: 1fr;
67 }
68 }
69</style>