Components overview

DevPlace ships a set of reusable custom HTML web components (custom elements). They
are plain ES6 modules under static/js/components/, registered once through
components/index.js (imported by Application.js, which loads on every page), so each element
is available everywhere, including these documentation pages.

Conventions#

  • Prefix. Project components use the dp- prefix (dp-avatar, dp-code, dp-toast,
    dp-dialog, dp-context-menu). The assistant ships its own devii- elements, and the
    emoji picker is a vendored third-party element.
  • Light DOM. Components render into the light DOM (no shadow root) so the site's global CSS
    applies to them directly, matching the existing devii-* elements.
  • Base class. Most extend Component (static/js/components/Component.js), a thin
    HTMLElement subclass with attribute helpers (attr, boolAttr, intAttr).
  • Singletons. Behavioural singletons (dp-dialog, dp-context-menu, dp-toast,
    dp-lightbox) are created once by Application.js and reachable as app.dialog,
    app.contextMenu, app.toast, and app.lightbox.

Catalog#

Component Purpose
dp-avatar User avatar image from a username seed.
dp-code Syntax-highlighted code block with copy button.
dp-content Render markdown/emoji/media as safe sanitised HTML (client-side; live content only - server content uses the backend render_content).
dp-title Render a single-line title as safe inline emoji/markdown (client-side; live titles only - server titles use the backend render_title).
dp-upload Clean file upload button with count and removable chips.
dp-toast Transient corner notifications.
dp-dialog Promise-based confirm, prompt, and alert modal.
dp-context-menu Right-click / long-press context menu.
dp-lightbox Full-screen image viewer opened by clicking a thumbnail.
devii-terminal The Devii assistant terminal window.
devii-avatar The Devii animated avatar character.
emoji-picker Vendored emoji picker element.

A note on scope#

Components are the self-contained, presentational UI pieces. The rest of the frontend is
plain ES6 modules: page controllers that enhance server-rendered partials (votes,
reactions, comments, polls, which share the OptimisticAction base) and small utilities (Http
for fetch, Poller and JobPoller for live and job-status polling, plus DOM helpers). Those are
not custom elements because they operate on server-side markup rather than rendering
standalone UI.