# embedodon

> A simple client-side script to render an Activity Stream (like from Mastodon)

Latest version **1.0.7** (published 2024-11-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install embedodon
pnpm add embedodon
yarn add embedodon
bun add embedodon
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2024-11-13 |
| First published | 2023-04-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 22 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Daniel Dickison |
| Maintainers | ddickison |
| Keywords | mastodon, activity-stream, client |

## Links

- npm: https://www.npmjs.com/package/embedodon
- Repository: https://github.com/danieldickison/embedodon
- Homepage: https://github.com/danieldickison/embedodon#readme
- Issues: https://github.com/danieldickison/embedodon/issues
- npm.io page: https://npm.io/package/embedodon

## Alternatives

- [launchdarkly-js-client-sdk](https://npm.io/package/launchdarkly-js-client-sdk.md) — 2.5M weekly downloads
- [@elastic/elasticsearch](https://npm.io/package/@elastic/elasticsearch.md) — 2.1M weekly downloads
- [@c8y/client](https://npm.io/package/@c8y/client.md) — 15.3K weekly downloads
- [@signaldb/maverickjs](https://npm.io/package/@signaldb/maverickjs.md) — 1.7K weekly downloads
- [@bbc/http-transport-cache](https://npm.io/package/@bbc/http-transport-cache.md) — 1.2K weekly downloads

## Recent versions

- 1.0.7 (latest) — 2024-11-13
- 1.0.6 — 2023-08-29
- 1.0.5 — 2023-05-05
- 1.0.4 — 2023-04-21
- 1.0.3 — 2023-04-12
- 1.0.2 — 2023-04-09
- 1.0.1 — 2023-04-09
- 1.0.0 — 2023-04-04
- 1.0.0-beta.1 — 2023-04-04
- 1.0.0-beta.0 — 2023-04-04

## README

# embedodon

Simple js to render a Mastodon user’s public toots.

Live example here: https://danieldickison.github.io/embedodon/

[![npm tests](https://github.com/danieldickison/embedodon/actions/workflows/npm-test.yml/badge.svg)](https://github.com/danieldickison/embedodon/actions/workflows/npm-test.yml)

## simple example ##

```html
<script type="module">
  import { EmbedodonElement } from 'https://cdn.jsdelivr.net/npm/embedodon@^1.0.6/dist/index.js'
  customElements.define('embed-odon', EmbedodonElement)
</script>
<embed-odon username="@dand@mastodonmusic.social" class="standard"></embed-odon>
```

Note that custom element names must contain a hyphen. The "standard" class enables a default color scheme.

## customize styles ##

Styles can be customized in several ways. Ordered from simplest to most complex but flexible, you can:
1. Specify a set of [custom CSS properties](#custom-css-properties)
2. Apply styles using [`::part` selectors](#part-selectors)
3. [Override `adoptedStyleSheets`](#override-adoptedstylesheets) to style arbitrary shadowRoot elements
4. [Call `Embedodon#render` directly](#call-embedodonrender-directly) without using the `EmbedodonElement` web component

### custom CSS properties ###

[Custom CSS properties](http://developer.mozilla.org/en-US/docs/Web/CSS/--*) can be used to specify some basic colors. Make sure `class="standard"` is _not_ included on the root element or else the standard colors will take precedence. You should specify _all_ of these properties if you are not using `class="standard"`:

| property | standard    | definition                |
|----------|-------------|---------------------------|
| --fg     | black/white | foreground color for text |
| --bg     | white/black | background color for toot |
| --link   | blue        | link text color           |
| --border | 1px gray    | border for toot           |

Example:
```css
embed-odon {
  --fg: #603;
  --bg: #eee;
  --link: #b0b;
  --border: 2px dashed var(--fg);
}
@media (prefers-color-scheme: dark) {
  embed-odon {
    --fg: #d9b;
    --bg: #222;
    --link: #b6e;
  }
}
```

### `::part` selectors ###

CSS [`::part` selectors](http://developer.mozilla.org/en-US/docs/Web/CSS/::part) can be used to target specific elements within the Embededon-rendered component from your page CSS. Exposed parts are:

| part      | element     | definition                                |
|-----------|-------------|-------------------------------------------|
| toot      | `<article>` | container for each toot                   |
| timestamp | `<time>`    | timestamp link of toot                    |
| content   | `<div>`     | text contents, containing `<p>`, etc      |
| media     | `<div>`     | media attachments, containing images, etc |
| image     | `<img>`     | thumbnail image for media attachment      |
| video     | `<video>`   | inline video for media attachment         |
| progress  | `<progress>`| progress bar while toots load             |

Example:
```css
embed-odon::part(timestamp) {
  font-style: italic;
  text-align: right;
}
```

### override `adoptedStyleSheets` ###

Because the [shadow root](http://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot) of `EmbedodonElement` is created with `mode: 'open'`, its [adoptedStyleSheets](http://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/adoptedStyleSheets) property can be overridden. You can choose to include or omit the base stylesheet, which is exposed as `Embedodon.baseStyleSheet`:

```js
import { Embedodon, EmbedodonElement } from 'https://cdn.jsdelivr.net/npm/embedodon@^1.0.6/dist/index.js'
customElements.define('embed-odon', EmbedodonElement)
const styleSheet = new CSSStyleSheet()
styleSheet.replaceSync(`
  a {
    text-decoration-style: wavy;
  }
`)
for (const el of document.querySelectorAll('embed-odon')) {
  el.shadowRoot.adoptedStyleSheets = [Embedodon.baseStyleSheet, styleSheet]
}
```

### call `Embedodon#render` directly ###

If you would like full control of styling the DOM elements rendered by `Embedodon`, you can forego `EmbedodonElement` and inject the results of calling the `render` method directly into your DOM:

```js
import { Embedodon } from 'https://cdn.jsdelivr.net/npm/embedodon@^1.0.6/dist/index.js'
const container = document.getElementById('embedodon-container')
const embedodon = new Embedodon(username)
await embedodon.refresh()
container.append(...embedodon.render())
```

---
_Source: https://npm.io/package/embedodon · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._