Browser-side Web Component for rendering Webmentions.

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

Import scripts from CDN or NPM:

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

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>

TODO

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

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

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

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>

Seia has prepared a number of presets.

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>

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>

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