{"id":22840480,"url":"https://github.com/importantimport/seia","last_synced_at":"2025-07-08T05:33:11.967Z","repository":{"id":65855278,"uuid":"601223151","full_name":"importantimport/seia","owner":"importantimport","description":"📩 Browser-side Web Component for rendering Webmentions.","archived":false,"fork":false,"pushed_at":"2023-10-04T10:45:18.000Z","size":287,"stargazers_count":14,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-20T16:04:31.549Z","etag":null,"topics":["indieweb","webmention","webmention-io"],"latest_commit_sha":null,"homepage":"https://seia.js.org","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"wtfpl","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/importantimport.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"COPYING","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":["https://donate.lol/eth/0xaBdB3f715198A4d7e6591b6ebBE8Ccf235e5D752"]}},"created_at":"2023-02-13T16:12:01.000Z","updated_at":"2025-04-19T05:39:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"a824168e-56c5-4327-930f-ec1ca26fbb29","html_url":"https://github.com/importantimport/seia","commit_stats":{"total_commits":50,"total_committers":1,"mean_commits":50.0,"dds":0.0,"last_synced_commit":"07ed54d1da335e6ddfb42b8582bc1d73265765a7"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/importantimport%2Fseia","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/importantimport%2Fseia/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/importantimport%2Fseia/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/importantimport%2Fseia/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/importantimport","download_url":"https://codeload.github.com/importantimport/seia/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251299583,"owners_count":21567254,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["indieweb","webmention","webmention-io"],"created_at":"2024-12-13T01:12:07.578Z","updated_at":"2025-04-28T10:50:02.474Z","avatar_url":"https://github.com/importantimport.png","language":"TypeScript","funding_links":["https://donate.lol/eth/0xaBdB3f715198A4d7e6591b6ebBE8Ccf235e5D752"],"categories":[],"sub_categories":[],"readme":"# Seia\n\n[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz_small.svg)](https://stackblitz.com/github/importantimport/seia?file=index.html)\n[![npm package](https://img.shields.io/npm/v/seia)](https://www.npmjs.com/package/seia)\n[![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/seia?color=%23ff5627)](https://www.jsdelivr.com/package/npm/seia)\n![brotli size](https://img.badgesize.io/https://esm.run/seia?compression=brotli)\n\nBrowser-side Web Component for rendering Webmentions.\n\n## Compatible Services\n\n- [Webmention.io](https://webmention.io) (mentions.json)\n- PR's welcome!\n\n## Usage\n\n### Component\n\nImport scripts from CDN or NPM:\n\n###### CDN\n\n```html\n\u003cscript type=\"module\" src=\"https://esm.run/seia\" async\u003e\u003c/script\u003e\n```\n\n###### NPM\n\n```bash\npnpm add seia # pnpm\n# yarn add seia # yarn\n# npm i seia # npm\n```\n\n```ts\nimport 'seia'\n```\n\nNow add Seia components where you need them:\n\n```html\n\u003cs-e-i-a\u003e\u003c/s-e-i-a\u003e\n```\n\n### Wrapper\n\nTODO\n\n```jsonc\n{\n  \"compileOptions\": {\n    \"emitDeclarationOnly\": false // before: true\n  }\n}\n```\n\n```bash\npnpm gen --frameworks \u003creact/vue/angular\u003e\n```\n\n\u003c!-- Can't create React / Vue / Angular wrapper until [lit/lit#3334](https://github.com/lit/lit/issues/3334) is fixed. --\u003e\n\n## Attributes\n\n| Attribute      | Default                                                              | Comment                                                                   |\n| -------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------- |\n| api            | https://webmention.io/api/mentions.json                              |                                                                           |\n| css            | ''                                                                   | Inject styles                                                             |\n| powered-by     | true                                                                 |                                                                           |\n| unsafe-html    | true                                                                 |                                                                           |\n| sort-by        | 'created'                                                            | [webmention.io#sorting](https://github.com/aaronpk/webmention.io#sorting) |\n| sort-dir       | 'down'                                                               | [webmention.io#sorting](https://github.com/aaronpk/webmention.io#sorting) |\n| per-page       | 99                                                                   | [webmention.io#paging](https://github.com/aaronpk/webmention.io#paging)   |\n| target         | globalThis.location.href                                             | without searchParams                                                      |\n| fallback-photo | https://ui-avatars.com/api/?name=%NAME%\u0026background=random\u0026format=svg | `%NAME%` will be replaced with the `author.name`                          |\n\n## Customizing\n\n### CSS Variables\n\nYou can adjust the appearance of Seia with CSS variables.\n\nFor example, to apply the Material 3 color scheme:\n\n```css\n:root {\n  --seia-color-bg: var(--md-sys-color-surface-variant);\n  --seia-color-text: var(--md-sys-color-on-surface-variant);\n  --seia-color-primary: var(--md-sys-color-primary);\n}\n```\n\n### Style Element\n\nYou can inject styles into the Shadow DOM via the `css` attribute.\n\n```html\n\u003cs-e-i-a css=\".h-cite{padding:1rem};\"\u003e\u003c/s-e-i-a\u003e\n```\n\n### Presets\n\nSeia has prepared a number of presets.\n\n#### Dark Mode\n\nAdd simple dark mode support for the default color scheme.\n\nIt is not enabled by default since custom color schemes are encouraged.\n\n```html\n\u003c!-- link --\u003e\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://cdn.jsdelivr.net/npm/seia/dist/styles/dark.css\"\n/\u003e\n\u003c!-- inject --\u003e\n\u003cs-e-i-a\n  css=\"@import url('https://cdn.jsdelivr.net/npm/seia/dist/styles/dark.css');\"\n\u003e\u003c/s-e-i-a\u003e\n```\n\n#### Material Theme\n\nApply the Material Theme as shown above.\n\n```html\n\u003c!-- link --\u003e\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://cdn.jsdelivr.net/npm/seia/dist/styles/material.css\"\n/\u003e\n\u003c!-- inject --\u003e\n\u003cs-e-i-a\n  css=\"@import url('https://cdn.jsdelivr.net/npm/seia/dist/styles/material.css');\"\n\u003e\u003c/s-e-i-a\u003e\n```\n\n### Emoji Fonts\n\nSeia uses text rather than icons, so importing Emoji fonts and setting the font-family should work. for example:\n\n```css\n/* Noto Colr Emoji Glyf */\n@import url('https://fonts.googleapis.com/css2?family=Noto+Colr+Emoji+Glyf\u0026display=swap');\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimportantimport%2Fseia","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimportantimport%2Fseia","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimportantimport%2Fseia/lists"}