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.

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

guestbook-display#

Displays guestbook signatures by querying Constellation for backlinks.

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