embedodon

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

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

simple example

<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="@[email protected]" 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
2. Apply styles using ::part selectors
3. Override adoptedStyleSheets to style arbitrary shadowRoot elements
4. Call Embedodon#render directly without using the EmbedodonElement web component

custom CSS properties

Custom CSS properties 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:

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 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:

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

override adoptedStyleSheets

Because the shadow root of EmbedodonElement is created with mode: 'open', its adoptedStyleSheets property can be overridden. You can choose to include or omit the base stylesheet, which is exposed as Embedodon.baseStyleSheet:

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:

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())