Skip to content

Embeddable <ote-events> web component (closes #27) - #28

Merged
hhkaos merged 2 commits into
mainfrom
worktree-embed-widget-issue-27
Aug 7, 2026
Merged

Embeddable <ote-events> web component (closes #27)#28
hhkaos merged 2 commits into
mainfrom
worktree-embed-widget-issue-27

Conversation

@hhkaos

@hhkaos hhkaos commented Aug 7, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Extracts the OTE JSON/ICS/RSS-to-display normalizer out of apps/preview/src/main.ts into a new shared, private @opentechevents/preview-feed package (with its own fixtures/tests), so it isn't duplicated between the previewer and the new widget.
  • Adds apps/embed: a single <ote-events> custom element (feed/limit/theme/lang/show-past/layout attributes, list/cards layouts, Shadow DOM with --ote-* CSS custom-property theming, loading/empty/error states) plus an interactive playground page that doubles as its documentation (every control maps to one attribute, live preview, copy-paste snippet generator).
  • The widget only fetches native JSON OTE feeds by design — preview-feed is built with sideEffects:false so esbuild tree-shakes the heavier ICS/RSS converters (ical.js, DOMParser) out of dist/ote-events.js, which comes out to ~7kb minified.
  • Wires apps/embed into deploy-tools.yml so tools.opentechevents.org/embed/ote-events.js (the URL referenced in the playground snippet) resolves once this merges.

Test plan

  • pnpm build && pnpm test && pnpm typecheck && pnpm lint — all green across the whole workspace (578 tests)
  • Manually exercised the playground in Chrome against the real acceptance-criteria feed (https://combuilderses.github.io/events/feed.json, currently empty — correctly renders the empty state) and against a synthetic feed with past/future events: list layout, cards layout, light/dark theme, show-past, lang=es/en, and the error state on a broken feed URL all render correctly.
  • Copy-button clipboard behavior couldn't be verified via CDP automation (Chrome's clipboard permission prompt blocks it) — code path reviewed, works for a real user click; noted in apps/embed/CLAUDE.md.
  • Someone with GitHub Pages access should verify the deploy-tools.yml change once merged (tools.opentechevents.org/embed/ should come up alongside /editor/ and /preview/).

Closes #27.

https://claude.ai/code/session_011dPq4KUvwFaPbSUmYXBGae

hhkaos and others added 2 commits August 7, 2026 22:55
Extracts the OTE JSON/ICS/RSS-to-display normalizer already living inline
in apps/preview/src/main.ts into a new shared @opentechevents/preview-feed
package, then builds apps/embed on top of it: a single <ote-events> custom
element (feed/limit/theme/lang/show-past/layout attributes, list/cards
layouts, shadow-DOM --ote-* theming) plus an interactive playground page
that doubles as its documentation and copy-paste snippet generator.

The widget only fetches native JSON feeds — preview-feed is built with
sideEffects:false so esbuild tree-shakes the heavier ICS/RSS converters
(ical.js, DOMParser) out of its bundle, keeping dist/ote-events.js at ~7kb.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011dPq4KUvwFaPbSUmYXBGae
Wires the new embeddable widget into the same GitHub Pages pipeline that
already publishes the editor and feed previewer, so the script URL used in
the playground snippet (tools.opentechevents.org/embed/ote-events.js)
resolves once this merges to main.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011dPq4KUvwFaPbSUmYXBGae
@hhkaos
hhkaos merged commit d41abc4 into main Aug 7, 2026
1 check passed
@hhkaos
hhkaos deleted the worktree-embed-widget-issue-27 branch August 7, 2026 21:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Build an embeddable OTE events Web Component

1 participant