I Published My First NPM Package

I published my first package to npm. It’s a Lit web component that renders a webmention feed. I originally built it for my own site but wanted to experiment making something that others can use and customize. I chose to make it a web component so that it can be used in any framework and be as simple as a tag in your HTML. I used Lit as the base for the components for its developer experience and reduced boilerplate compared to vanilla web components.

The part I enjoyed most was thinking beyond my own use case. The component ships with sensible defaults but exposes CSS custom properties for easy theming and ::part() selectors for deeper structural overrides. You can even swap out the like and repost icons and pagination labels via slots.

The source code is open on GitHub, and the package is published under the name webmention-feed. If you want to add a webmention feed to your site, give it a try! Check out the source on GitHub.

Some example looks below

Default Look

See the configuration

<webmention-feed
  post-url="https://yoursite.com/your-post/"
  endpoint="https://webmention.io/yoursite.com/webmention"
  per-page="3"
></webmention-feed>

Dark neon

Monospace font, magenta accents, and sharp corners via ::part().

♦⟳◀ prevnext ▶

See the configuration

<webmention-feed
  post-url="https://yoursite.com/your-post/"
  endpoint="https://webmention.io/yoursite.com/webmention"
  per-page="3"
  style="
    --wm-accent-color: #f0f;
    --wm-text-color: #e0e0e0;
    --wm-border-color: #f0f;
    --wm-reply-bg: #0d0d0d;
    --wm-reply-border-color: #f0f;
    --wm-input-bg: #111;
    --wm-input-border-color: #f0f;
    --wm-avatar-bg: #2a002a;
    --wm-button-text-color: #fff;
    font-family: monospace;
  "
>
  <span slot="like-icon">♦</span>
  <span slot="repost-icon">⟳</span>
  <span slot="prev-label">◀ prev</span>
  <span slot="next-label">next ▶</span>
</webmention-feed>

webmention-feed::part(reply) {
  border-radius: 0;
  border-left: 2px solid #f0f;
  border-top: none;
  border-right: none;
  border-bottom: none;
  padding-left: 1rem;
}
webmention-feed::part(button) {
  border-radius: 0;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
webmention-feed::part(page-button) {
  background: transparent;
  color: #f0f;
  border: 1px solid #f0f;
  border-radius: 0;
  font-family: monospace;
}
webmention-feed::part(page-button--disabled) {
  opacity: 0.2;
}

Brutalist

Bold typography, yellow accents, and offset box shadows via ::part().

▲⬛← BACKMORE →

See the configuration

<webmention-feed
  post-url="https://yoursite.com/your-post/"
  endpoint="https://webmention.io/yoursite.com/webmention"
  per-page="3"
  style="
    --wm-accent-color: #ffe600;
    --wm-text-color: #fff;
    --wm-border-color: #ffe600;
    --wm-reply-bg: #111;
    --wm-reply-border-color: #ffe600;
    --wm-input-bg: #222;
    --wm-input-border-color: #ffe600;
    --wm-avatar-bg: #333;
    --wm-button-text-color: #111;
    font-family: 'Arial Black', Arial, sans-serif;
  "
>
  <span slot="like-icon">▲</span>
  <span slot="repost-icon">⬛</span>
  <span slot="prev-label">← BACK</span>
  <span slot="next-label">MORE →</span>
</webmention-feed>

webmention-feed::part(reply) {
  border-radius: 0;
  border: 3px solid #ffe600;
  box-shadow: 5px 5px 0 #ffe600;
  margin-bottom: 4px;
}
webmention-feed::part(heading) {
  font-size: 2rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  border-bottom: 4px solid #ffe600;
  padding-bottom: 0.25rem;
}
webmention-feed::part(button) {
  border-radius: 0;
  border: 3px solid #ffe600;
  box-shadow: 3px 3px 0 #ffe600;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
webmention-feed::part(input) {
  border-radius: 0;
  border: 3px solid #ffe600;
  font-weight: 700;
  color: #fff;
}
webmention-feed::part(page-button) {
  background: #111;
  color: #ffe600;
  border: 3px solid #ffe600;
  border-radius: 0;
  box-shadow: 3px 3px 0 #ffe600;
  font-weight: 900;
  text-transform: uppercase;
}
webmention-feed::part(page-button--disabled) {
  opacity: 0.2;
  box-shadow: none;
}