cutebook

Web components for AT Protocol guestbooks. Sign and display guestbook entries stored in user repositories, indexed via Constellation.

Demo: https://guestbook.nkp.pet/

Installation

npm install cutebook

Peer dependencies:

npm install @atcute/client @atcute/oauth-browser-client @atcute/identity-resolver

Quick Start

The simplest way to use the components is with the auto-register entry point:

import { configureGuestbook } from 'cutebook/register';

configureGuestbook({
  oauth: {
    clientId: 'https://your-app.com/client-metadata.json',
    redirectUri: 'https://your-app.com/',
    scope: 'atproto transition:generic',
  },
});

Then use the custom elements in your HTML:

<guestbook-sign did="did:plc:your-did-here"></guestbook-sign>
<guestbook-display did="did:plc:your-did-here" limit="50"></guestbook-display>

Manual Registration

If you need more control over element registration:

import { 
  GuestbookSignElement, 
  GuestbookDisplayElement, 
  configureGuestbook 
} from 'cutebook';

configureGuestbook({
  oauth: {
    clientId: 'https://your-app.com/client-metadata.json',
    redirectUri: 'https://your-app.com/',
    scope: 'atproto transition:generic',
  },
});

customElements.define('my-guestbook-sign', GuestbookSignElement);
customElements.define('my-guestbook-display', GuestbookDisplayElement);

Components

guestbook-sign

A form component that handles OAuth authentication and record creation.

| Attribute | Description | |-----------|-------------| | did | The DID of the guestbook owner (required) |

Dispatches a sign-created event with { uri, cid } when a signature is successfully created.

guestbook-display

Displays guestbook signatures by querying Constellation for backlinks.

| Attribute | Description | |-----------|-------------| | did | The DID of the guestbook owner (required) | | limit | Maximum number of entries to display (default: 50) |

Call .refresh() on the element to reload signatures.

Lexicon

Signatures use the pet.nkp.guestbook.sign record type:

{
  "$type": "pet.nkp.guestbook.sign",
  "subject": "did:plc:guestbook-owner",
  "message": "Your message here",
  "createdAt": "2024-01-01T00:00:00.000Z"
}

Development

npm run dev          # Run demo app
npm run build        # Build library
npm run build:demo   # Build demo app
npm run check        # Type check

Credits

Handle typeahead powered by actor-typeahead by Jake Lazaroff.

License

MIT