Skip to content

importantimport/seia

Seia

Open in StackBlitz npm package jsDelivr hits (npm) brotli size

Browser-side Web Component for rendering Webmentions.

Compatible Services

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