pckt-button

Embeddable split-button widget for pckt.blog. Links to a blog and its most recent post.

Quick start

<!-- load the script once -->
<script src="https://unpkg.com/pckt-button/dist/pckt-button.min.js"></script>

<!-- use the element anywhere -->
<pckt-button handle="your-handle.bsky.social"></pckt-button>

Usage

By AT Protocol handle

<pckt-button handle="samarinara.bsky.social"></pckt-button>

Resolves via bsky.social → PDS → fetches publication + most recent post.

By blog URL

<pckt-button blog-url="https://samarinara.pckt.blog"></pckt-button>

Auto-discovers the AT Protocol handle from the blog domain.

Custom blog name

<pckt-button handle="samarinara.bsky.social" blog-name="Sam's Blog"></pckt-button>

Override the blog name shown on the right half of the button.

Customized with CSS variables

<style>
  pckt-button {
    --pckt-radius: 8px;
    --pckt-height: 48px;
    --pckt-blog-bg: #2d1e12;
    --pckt-blog-text: #e8d5c4;
    --pckt-post-bg: #1a110b;
    --pckt-post-text: #e8d5c4;
    --pckt-accent: #d4915e;
  }
</style>
<pckt-button handle="samarinara.bsky.social" blog-name="Sam"></pckt-button>

CSS custom properties

| Property | Default | Description | |---|---|---| | --pckt-font | system-ui, -apple-system, "Segoe UI", Roboto, sans-serif | Font family | | --pckt-radius | 14px | Border radius | | --pckt-gap | 2px | Gap between the two halves | | --pckt-height | 56px | Overall height | | --pckt-post-bg | #58A7FF | Left half (post) background | | --pckt-post-text | #ffffff | Left half text color | | --pckt-blog-bg | #FF5D5B | Right half (blog) background | | --pckt-blog-text | #ffffff | Right half text color | | --pckt-accent | #58A7FF | Accent color used in hover effects | | --pckt-transition | 0.35s cubic-bezier(0.4, 0, 0.2, 1) | Transition timing |

Attributes

| Attribute | Type | Description | |---|---|---| | handle | string | AT Protocol handle (e.g. user.bsky.social) | | blog-url | string | Blog URL (e.g. https://user.pckt.blog) | | blog-name | string | Override the blog name displayed on the right half |

Install via npm

npm install pckt-button

import "pckt-button";
// or
import { PcktButton } from "pckt-button";

Development

npm install
npm run dev

Build with npm run build.

License

MIT