dp-title

Renders a single-line title as safe inline rich text: emoji shortcodes, inline
GitHub-flavored markdown (bold, italic, inline code, strikethrough), and DOMPurify
sanitisation. It is the title-sized companion to dp-content:
both expose the shared contentRenderer engine (static/js/ContentRenderer.js), but dp-title
calls its renderInline path, so it never produces block elements, links, images, or media embeds
and stays on one line.

Server-rendered titles are now produced on the backend for SEO (the render_title Jinja
global, devplacepy/rendering.py, same inline behaviour). This client component is retained for
live, client-generated titles only and for future use; do not wrap server-known titles in it.

Source: static/js/components/AppTitle.js.

Behaviour

• On connection the element reads its own text, renders it once, and replaces its contents with
  the sanitised inline HTML.
• The renderer is inline-only: marked.parseInline is used (not the block parser), and
  sanitisation restricts output to inline formatting tags (b, strong, i, em, code,
  del, s, mark, sub, sup, span, br). Anchors, images, and block tags are stripped,
  so a dp-title placed inside an existing link or heading never produces nested or block markup.
• Sanitisation is fail-closed: rendering throws if DOMPurify is unavailable rather than emitting
  unsanitised HTML.
• The element is display: inline, so it drops in directly inside an h1/h3, an anchor, or a
  span without changing layout.
• The server still emits the raw title text as the element's content, so no-JS clients see the
  title as plain text (only the emoji/markdown enhancement is client-side).

Where it is used

Server-rendered titles (posts, projects, gists, news, issues, profile tabs, listings, saved,
leaderboard, back-links) are rendered on the backend via the render_title Jinja global. This
client component is used only for titles created live in the browser and is available for future
client-side use.

Usage

Put the title text as the element's content. Escape any literal HTML you do not want treated as
live markup:

<h3 class="post-title"><dp-title>Shipped **v2** today :rocket:</dp-title></h3>