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');