Seia

Browser-side Web Component for rendering Webmentions.

Compatible Services

Webmention.io (mentions.json)
PR's welcome!

Usage

Component

Import scripts from CDN or NPM:

CDN

<script type="module" src="https://esm.run/seia" async></script>

NPM

pnpm add seia # pnpm
# yarn add seia # yarn
# npm i seia # npm

import 'seia'

Now add Seia components where you need them:

<s-e-i-a></s-e-i-a>

Wrapper

TODO

{
  "compileOptions": {
    "emitDeclarationOnly": false // before: true
  }
}

pnpm gen --frameworks <react/vue/angular>

Attributes

Attribute	Default	Comment
api	https://webmention.io/api/mentions.json
css	''	Inject styles
powered-by	true
unsafe-html	true
sort-by	'created'	webmention.io#sorting
sort-dir	'down'	webmention.io#sorting
per-page	99	webmention.io#paging
target	globalThis.location.href	without searchParams
fallback-photo	https://ui-avatars.com/api/?name=%NAME%&background=random&format=svg	`%NAME%` will be replaced with the `author.name`

Customizing

CSS Variables

You can adjust the appearance of Seia with CSS variables.

For example, to apply the Material 3 color scheme:

:root {
  --seia-color-bg: var(--md-sys-color-surface-variant);
  --seia-color-text: var(--md-sys-color-on-surface-variant);
  --seia-color-primary: var(--md-sys-color-primary);
}

Style Element

You can inject styles into the Shadow DOM via the css attribute.

<s-e-i-a css=".h-cite{padding:1rem};"></s-e-i-a>

Presets

Seia has prepared a number of presets.

Dark Mode

Add simple dark mode support for the default color scheme.

It is not enabled by default since custom color schemes are encouraged.

<!-- link -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/seia/dist/styles/dark.css"
/>
<!-- inject -->
<s-e-i-a
  css="@import url('https://cdn.jsdelivr.net/npm/seia/dist/styles/dark.css');"
></s-e-i-a>

Material Theme

Apply the Material Theme as shown above.

<!-- link -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/seia/dist/styles/material.css"
/>
<!-- inject -->
<s-e-i-a
  css="@import url('https://cdn.jsdelivr.net/npm/seia/dist/styles/material.css');"
></s-e-i-a>

Emoji Fonts

Seia uses text rather than icons, so importing Emoji fonts and setting the font-family should work. for example:

/* Noto Colr Emoji Glyf */
@import url('https://fonts.googleapis.com/css2?family=Noto+Colr+Emoji+Glyf&display=swap');

importantimport/seia