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