Writing Pages#

FM pages are written in Markdown with several TrenchQuarters-specific extensions for images, icons, and ORBAT diagrams.

Editor Layout#

The editor opens when you create a new page or click the pencil icon on an existing one. It is a full-height split-pane layout:

• Left pane: raw Markdown input (dark background, monospace font)
• Right pane: live preview that updates as you type
• Toolbar: ORBAT button, Save button, and (on mobile) Edit/Preview toggle
• Metadata bar (below toolbar): Title field, Slug field, Category dropdown, Published checkbox

On mobile, tap Edit or Preview in the toolbar to switch between panes.

Metadata Bar#

Changing the slug or category and saving will navigate the browser to the new URL automatically.

---

Markdown Reference#

Standard Markdown is fully supported.

Headings#

# H1 — Page title (large, underlined, uppercase)
## H2 — Section heading (underlined)
### H3 — Sub-section (small caps, military font)
#### H4 — Minor heading

Text Formatting#

**bold**   *italic*   `inline code`

Lists#

- Unordered item (renders with ▸ bullet)
- Another item

1. Ordered item
2. Another item

Blockquotes#

> Field note or callout text.

Renders as a tan-background block with a left border — use for notes, warnings, or field notes.

Horizontal Rule#

---

Renders as a faded divider line.

Links#

[Link text](https://example.com)
[Internal page](../operations/map-editor)

Images#

![Alt text](/tm/my-image.png)

Standard images render block-level with a border and border-radius. For float and inline variants see Custom HTML Extensions below.

Tables#

| Column A | Column B |
|----------|----------|
| Value 1  | Value 2  |

Tables render with alternating row shading and a military-style header. When a floated <figure class="manual-cimg"><img src="" alt=""></figure> is present beside a table, the table automatically resizes to the available width.

Code Blocks#

Fence with triple backticks and an optional language identifier:

```javascript
const x = 1
```

---

Custom HTML Extensions#

You can mix HTML tags directly into your Markdown for layout features not covered by standard Markdown.

Captioned Float Image — <figure class="manual-cimg"><img src="" alt=""></figure>#

Places a captioned image floated to the right, similar to a Wikipedia infobox. Text and content flow around it on the left.

<figure class="manual-cimg"><img src="/tm/my-screenshot.png" alt="Caption text shown below the image." width="260"><figcaption>Caption text shown below the image.</figcaption></figure>

Attributes:

• src — image URL (required)
• caption — text displayed below the image (optional)
• alt — alt text (falls back to caption if omitted)
• width — pixel width of the float box (optional; defaults to natural size up to 280px)

Layout behaviour:

• # (H1) and ## (H2) headings clear the float and appear below the image
• --- horizontal rules also clear the float
• ### and deeper headings sit alongside the image
• Tables beside the float automatically shrink to the available width

Inline Icon — img-inline#

Adds a boolean attribute to a standard <img> tag to display it inline with surrounding text. Used for role icons in tables.

<img src="/icons/roles/S3.svg" img-inline alt="S3" width="20" height="20"> **S3 - Operations**

The img-inline attribute removes the image border, sets display: inline-block, and vertically centres the icon with the text.

Role icon paths follow the pattern /icons/roles/[ROLE].svg where [ROLE] is one of: COMMAND, S1, S2, S3, S4, S7, S8, S9, GRUNT.

Stencil Preview — stencil-icon#

Displays a small preview thumbnail of a map stencil, served from the stencil registry. Useful in reference tables alongside stencil descriptions.

<img src="/api/stencils/preview/msr" stencil-icon alt="MSR">

The URL pattern is /api/stencils/preview/[stencil-id]. See Reference → Symbols for the full list of stencil IDs. The image renders as a 36×36 thumbnail with a subtle border and warm background tint.

---

ORBAT Embeds#

An ORBAT (Order of Battle) is an interactive unit hierarchy diagram that can be embedded in any page.

Inserting an ORBAT#

1. Position your cursor in the editor where you want the diagram to appear.
2. Click the ORBAT button in the toolbar.
3. Build your unit tree in the builder panel that opens:
   • Add groups with the Add Group button
   • Each group has a name, optional unit marker symbol, optional link URL, and optional description
   • Groups can be nested indefinitely with the Add Sub-group button
   • Drag the handle on the left of each row to reorder
4. Click Save in the builder. A [orbat:ID] token is inserted at the cursor position.

The token renders as a scrollable, pannable, zoomable SVG diagram in both the live preview and the published page.

Editing an Existing ORBAT#

Click the Edit button that appears on the ORBAT diagram in the live preview pane. The builder reopens with the existing data. Saving updates the diagram in place without inserting a new token.

Token Syntax#

The token must be on its own line. Moving or copying the token moves the diagram. Deleting the token removes the embed from the page (the ORBAT data is not deleted from the database).