{"id":15204042,"url":"https://github.com/danieldickison/embedodon","last_synced_at":"2025-09-08T02:35:14.568Z","repository":{"id":150651289,"uuid":"622366680","full_name":"danieldickison/embedodon","owner":"danieldickison","description":"simple web component to render a mastodon account‘s posts","archived":false,"fork":false,"pushed_at":"2023-08-29T05:21:04.000Z","size":167,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-04-14T09:14:21.358Z","etag":null,"topics":["client-side","embed","javascript","mastodon","typescript","vanilla-javascript","vanilla-js","web-components"],"latest_commit_sha":null,"homepage":"https://danieldickison.github.io/embedodon/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/danieldickison.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-04-01T22:28:51.000Z","updated_at":"2023-04-22T15:46:49.000Z","dependencies_parsed_at":"2023-09-21T20:12:37.951Z","dependency_job_id":null,"html_url":"https://github.com/danieldickison/embedodon","commit_stats":{"total_commits":51,"total_committers":2,"mean_commits":25.5,"dds":"0.039215686274509776","last_synced_commit":"5df143bf44a7f59d30c0dfe70ec7edbfd6ad8ec1"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danieldickison%2Fembedodon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danieldickison%2Fembedodon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danieldickison%2Fembedodon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danieldickison%2Fembedodon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danieldickison","download_url":"https://codeload.github.com/danieldickison/embedodon/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241901047,"owners_count":20039549,"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":["client-side","embed","javascript","mastodon","typescript","vanilla-javascript","vanilla-js","web-components"],"created_at":"2024-09-28T05:06:08.738Z","updated_at":"2025-03-05T18:27:50.004Z","avatar_url":"https://github.com/danieldickison.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# embedodon\n\nSimple js to render a Mastodon user’s public toots.\n\nLive example here: https://danieldickison.github.io/embedodon/\n\n[![npm tests](https://github.com/danieldickison/embedodon/actions/workflows/npm-test.yml/badge.svg)](https://github.com/danieldickison/embedodon/actions/workflows/npm-test.yml)\n\n## simple example ##\n\n```html\n\u003cscript type=\"module\"\u003e\n  import { EmbedodonElement } from 'https://cdn.jsdelivr.net/npm/embedodon@^1.0.6/dist/index.js'\n  customElements.define('embed-odon', EmbedodonElement)\n\u003c/script\u003e\n\u003cembed-odon username=\"@dand@mastodonmusic.social\" class=\"standard\"\u003e\u003c/embed-odon\u003e\n```\n\nNote that custom element names must contain a hyphen. The \"standard\" class enables a default color scheme.\n\n## customize styles ##\n\nStyles can be customized in several ways. Ordered from simplest to most complex but flexible, you can:\n1. Specify a set of [custom CSS properties](#custom-css-properties)\n2. Apply styles using [`::part` selectors](#part-selectors)\n3. [Override `adoptedStyleSheets`](#override-adoptedstylesheets) to style arbitrary shadowRoot elements\n4. [Call `Embedodon#render` directly](#call-embedodonrender-directly) without using the `EmbedodonElement` web component\n\n### custom CSS properties ###\n\n[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\"`:\n\n| property | standard    | definition                |\n|----------|-------------|---------------------------|\n| --fg     | black/white | foreground color for text |\n| --bg     | white/black | background color for toot |\n| --link   | blue        | link text color           |\n| --border | 1px gray    | border for toot           |\n\nExample:\n```css\nembed-odon {\n  --fg: #603;\n  --bg: #eee;\n  --link: #b0b;\n  --border: 2px dashed var(--fg);\n}\n@media (prefers-color-scheme: dark) {\n  embed-odon {\n    --fg: #d9b;\n    --bg: #222;\n    --link: #b6e;\n  }\n}\n```\n\n### `::part` selectors ###\n\nCSS [`::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:\n\n| part      | element     | definition                                |\n|-----------|-------------|-------------------------------------------|\n| toot      | `\u003carticle\u003e` | container for each toot                   |\n| timestamp | `\u003ctime\u003e`    | timestamp link of toot                    |\n| content   | `\u003cdiv\u003e`     | text contents, containing `\u003cp\u003e`, etc      |\n| media     | `\u003cdiv\u003e`     | media attachments, containing images, etc |\n| image     | `\u003cimg\u003e`     | thumbnail image for media attachment      |\n| video     | `\u003cvideo\u003e`   | inline video for media attachment         |\n| progress  | `\u003cprogress\u003e`| progress bar while toots load             |\n\nExample:\n```css\nembed-odon::part(timestamp) {\n  font-style: italic;\n  text-align: right;\n}\n```\n\n### override `adoptedStyleSheets` ###\n\nBecause 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`:\n\n```js\nimport { Embedodon, EmbedodonElement } from 'https://cdn.jsdelivr.net/npm/embedodon@^1.0.6/dist/index.js'\ncustomElements.define('embed-odon', EmbedodonElement)\nconst styleSheet = new CSSStyleSheet()\nstyleSheet.replaceSync(`\n  a {\n    text-decoration-style: wavy;\n  }\n`)\nfor (const el of document.querySelectorAll('embed-odon')) {\n  el.shadowRoot.adoptedStyleSheets = [Embedodon.baseStyleSheet, styleSheet]\n}\n```\n\n### call `Embedodon#render` directly ###\n\nIf 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:\n\n```js\nimport { Embedodon } from 'https://cdn.jsdelivr.net/npm/embedodon@^1.0.6/dist/index.js'\nconst container = document.getElementById('embedodon-container')\nconst embedodon = new Embedodon(username)\nawait embedodon.refresh()\ncontainer.append(...embedodon.render())\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanieldickison%2Fembedodon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanieldickison%2Fembedodon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanieldickison%2Fembedodon/lists"}