retoor
9a8046ab2a
- Add `cmd_isslop_prune`, `cmd_isslop_clear`, `cmd_isslop_analyze` CLI commands for AI usage analysis job management - Register `/game` router with `index` and `farm` endpoints for Code Farm idle game - Add `politics` to allowed TOPICS constant replacing `signals` - Introduce `ISSLOP_DIR`, `ISSLOP_WORKSPACES_DIR`, `ISSLOP_RUNS_DIR`, `ISSLOP_MEDIA_DIR` config paths - Add `clear_user_stars` and `clear_user_projects_cache` calls on vote and project create/delete - Update `make prod` to use `nproc` workers via `DEVPLACE_WEB_WORKERS` env var - Convert `database.py` and `utils.py` to packages for modular structure - Add `devplace apikey` and `devplace token` CLI subcommands for API key and access token management
48 lines
3.0 KiB
HTML
48 lines
3.0 KiB
HTML
<div class="docs-content" data-render>
|
|
# 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.
|
|
</div>
|