1
0
Fork 0
polaris-task-force/docs/wiki-infobox-template.md
Z8MB1E 51f7c803e0 feat(wiki): add scoped template CSS and developer HTML templates
WikiTemplates gains two fields: an optional css code field injected on
pages that use the template (selectors auto-scoped to a hash-based
.ptf-tpl-* class so templates never collide with each other or the app
shell), and a developer-only html field rendered verbatim (sanitized)
in place of the markdown body when transcluded.

- templateCss.ts scopes/sanitizes CSS, incl. nested at-rules; pages
  and the editor live preview inject scoped styles and drop the Card
  chrome in favor of a full-width article
- templateHtml.ts sanitizes HTML and splits prepared markdown around
  expansion sentinels so raw HTML renders without rehype-raw
- templates.ts adds extractTemplateNames/extractPlaceholders/
  extractDirectiveNames; prepareMarkdown threads an htmlTemplates map
- markdown pipeline gains rehype-highlight for fenced code blocks
- styles.css adds wiki prose typography + infobox demo styling
- docs: demo article and Infobox template authoring guide
2026-09-06 05:32:48 -04:00

2.9 KiB

Wiki template: Infobox

A Wikipedia-style right-hand info card. Renders as a floated card on the right of the article with a title, optional image, and a field/value metadata table. Content wraps around it; on screens under 640px it becomes a full-width block.

Creating it

Payload admin panel → Wiki → Wiki Templates → Create New:

  • Name: Infobox
  • Description: Wikipedia-style info card. Place {{Infobox}} near the top of an article body, then replace the {{...}} markers and table rows with real content.
  • Body: paste the block below exactly (the :::: fence lines are part of it).
  • CSS: optional. Paste the block below (or write your own).

Body

::::infobox
**{{Title}}**

![{{Image alt}}]({{Image url}} "{{Image caption}}")

| {{Section}} | {{Value}} |
| ----------- | --------- |
| {{Field 1}} | {{Value 1}} |
| {{Field 2}} | {{Value 2}} |
| {{Field 3}} | {{Value 3}} |
| {{Field 4}} | {{Value 4}} |
| {{Field 5}} | {{Value 5}} |

{{One-line summary of the subject.}}
::::

CSS

.infobox {
  /* The shell already styles .infobox (float, card look, field table).
     Add template-specific tweaks here, e.g.: */
}
.infobox table {
  font-size: 0.875rem;
}

The CSS scoping contract

Every template's CSS field is auto-scoped at render time. Each rule's selector gets prefixed with a hash-based scope class derived from the template name, e.g. for a template named Infobox:

/* what you write in the admin panel */
.infobox table { font-size: 0.875rem; }

/* what actually ships to the browser */
.ptf-tpl-rpev9a .infobox table { font-size: 0.875rem; }

Consequences:

  • No collisions: two templates defining the same class can never override each other, and template CSS can never leak into (or override) the app shell outside wiki article content.
  • Write plain selectors: do not add .wiki-markdown or the scope class yourself — the renderer adds the prefix to every selector, including inside @media/@supports blocks.
  • @keyframes/@font-face are passed through untouched (animation names are global; prefer unique names).
  • Dynamic HTML: classes added at runtime by markdown directives (e.g. infobox from ::::infobox) keep their literal names — the scoping prefixes selectors, it does not rename classes.
  • Deliberate overrides of other templates or shell styles belong in the Shims collection, not here.

Usage notes

  • Place {{Infobox}} as the first line of the article body so the card floats beside the lead paragraphs.
  • Delete the image line if the article has no image.
  • The header row of the table renders as a section band; use it for a grouping label (e.g. "Service record") or keep it as Field/Value.
  • Wikilinks and templates expand inside the card as usual — e.g. [[Factions|faction]] works in a value cell.
  • {{...}} markers left unedited render as literal text — replace or delete every marker before publishing.