···11+# cutebook
22+33+Web components for AT Protocol guestbooks. Sign and display guestbook entries stored in user repositories, indexed via Constellation.
44+55+## Installation
66+77+```bash
88+npm install cutebook
99+```
1010+1111+Peer dependencies:
1212+1313+```bash
1414+npm install @atcute/client @atcute/oauth-browser-client @atcute/identity-resolver
1515+```
1616+1717+## Quick Start
1818+1919+The simplest way to use the components is with the auto-register entry point:
2020+2121+```ts
2222+import { configureGuestbook } from 'cutebook/register';
2323+2424+configureGuestbook({
2525+ oauth: {
2626+ clientId: 'https://your-app.com/client-metadata.json',
2727+ redirectUri: 'https://your-app.com/',
2828+ scope: 'atproto transition:generic',
2929+ },
3030+});
3131+```
3232+3333+Then use the custom elements in your HTML:
3434+3535+```html
3636+<guestbook-sign did="did:plc:your-did-here"></guestbook-sign>
3737+<guestbook-display did="did:plc:your-did-here" limit="50"></guestbook-display>
3838+```
3939+4040+## Manual Registration
4141+4242+If you need more control over element registration:
4343+4444+```ts
4545+import {
4646+ GuestbookSignElement,
4747+ GuestbookDisplayElement,
4848+ configureGuestbook
4949+} from 'cutebook';
5050+5151+configureGuestbook({
5252+ oauth: {
5353+ clientId: 'https://your-app.com/client-metadata.json',
5454+ redirectUri: 'https://your-app.com/',
5555+ scope: 'atproto transition:generic',
5656+ },
5757+});
5858+5959+customElements.define('my-guestbook-sign', GuestbookSignElement);
6060+customElements.define('my-guestbook-display', GuestbookDisplayElement);
6161+```
6262+6363+## Components
6464+6565+### guestbook-sign
6666+6767+A form component that handles OAuth authentication and record creation.
6868+6969+| Attribute | Description |
7070+|-----------|-------------|
7171+| `did` | The DID of the guestbook owner (required) |
7272+7373+Dispatches a `sign-created` event with `{ uri, cid }` when a signature is successfully created.
7474+7575+### guestbook-display
7676+7777+Displays guestbook signatures by querying Constellation for backlinks.
7878+7979+| Attribute | Description |
8080+|-----------|-------------|
8181+| `did` | The DID of the guestbook owner (required) |
8282+| `limit` | Maximum number of entries to display (default: 50) |
8383+8484+Call `.refresh()` on the element to reload signatures.
8585+8686+## Lexicon
8787+8888+Signatures use the `pet.nkp.guestbook.sign` record type:
8989+9090+```json
9191+{
9292+ "$type": "pet.nkp.guestbook.sign",
9393+ "subject": "did:plc:guestbook-owner",
9494+ "message": "Your message here",
9595+ "createdAt": "2024-01-01T00:00:00.000Z"
9696+}
9797+```
9898+9999+## Development
100100+101101+```bash
102102+npm run dev # Run demo app
103103+npm run build # Build library
104104+npm run build:demo # Build demo app
105105+npm run check # Type check
106106+```
107107+108108+## Credits
109109+110110+Handle typeahead powered by [actor-typeahead](https://tangled.org/jakelazaroff.com/actor-typeahead) by Jake Lazaroff.
111111+112112+## License
113113+114114+MIT