https://github.com/importantimport/seia
📩 Browser-side Web Component for rendering Webmentions.
https://github.com/importantimport/seia
indieweb webmention webmention-io
Last synced: 11 months ago
JSON representation
📩 Browser-side Web Component for rendering Webmentions.
- Host: GitHub
- URL: https://github.com/importantimport/seia
- Owner: importantimport
- License: wtfpl
- Created: 2023-02-13T16:12:01.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-04T10:45:18.000Z (over 2 years ago)
- Last Synced: 2025-04-20T16:04:31.549Z (about 1 year ago)
- Topics: indieweb, webmention, webmention-io
- Language: TypeScript
- Homepage: https://seia.js.org
- Size: 280 KB
- Stars: 14
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: COPYING
Awesome Lists containing this project
README
# Seia
[](https://stackblitz.com/github/importantimport/seia?file=index.html)
[](https://www.npmjs.com/package/seia)
[](https://www.jsdelivr.com/package/npm/seia)
Browser-side Web Component for rendering Webmentions.
## Compatible Services
- [Webmention.io](https://webmention.io) (mentions.json)
- PR's welcome!
## Usage
### Component
Import scripts from CDN or NPM:
###### CDN
```html
```
###### NPM
```bash
pnpm add seia # pnpm
# yarn add seia # yarn
# npm i seia # npm
```
```ts
import 'seia'
```
Now add Seia components where you need them:
```html
```
### Wrapper
TODO
```jsonc
{
"compileOptions": {
"emitDeclarationOnly": false // before: true
}
}
```
```bash
pnpm gen --frameworks
```
## 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](https://github.com/aaronpk/webmention.io#sorting) |
| sort-dir | 'down' | [webmention.io#sorting](https://github.com/aaronpk/webmention.io#sorting) |
| per-page | 99 | [webmention.io#paging](https://github.com/aaronpk/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:
```css
: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.
```html
```
### 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.
```html
```
#### Material Theme
Apply the Material Theme as shown above.
```html
```
### Emoji Fonts
Seia uses text rather than icons, so importing Emoji fonts and setting the font-family should work. for example:
```css
/* Noto Colr Emoji Glyf */
@import url('https://fonts.googleapis.com/css2?family=Noto+Colr+Emoji+Glyf&display=swap');
```