mdcms/app/pages/home.md
Claude cd1e6e14ce
Fix missing icon broken image, clean up debug logs, expand test cases
- iconEl: use actual icon filename as <img src> fallback so browser
  shows a visible broken image when the file is missing (was src="")
- Remove debug console.log statements added for diagnosis
- home.md: add test cases for message: override (with console warning)
  and missing icon (broken image should render)
- home.md: add explanatory text for message: key test

https://claude.ai/code/session_01UP8Wo2CKPNhvvTkzX48CWF
2026-05-17 18:27:41 +00:00

2 KiB

title sort
Home 100

Phase 4 — Callout Tags

Check each callout below. Each should show a coloured left border, an icon, a bold title in the accent colour, and a rendered body.


Basic types

title: Information
This is an **info** callout. Supports *italic*, `code`, and lists:

- Item one
- Item two
title: Warning
Something needs your attention. This is a **warning** callout.
title: Success
The operation completed successfully. This is a **success** callout.
title: Error
Something went wrong. This is an **error** callout.

No title

No title key here. The title row should not appear at all — just the body.

Markdown body

title: Rich body
- List item one
- List item two

A paragraph with `inline code` and a [link](https://example.com).

Custom icon override

title: Info with warning icon
icon: warning
This info callout uses the warning icon instead of the default info icon.

Config-defined message (message: key)

The callout below uses message: aitranslation to pull its title and body from the callouts: block in config.yml. The type (warning) also comes from the config entry, not the tag name.

message: aitranslation

message: overrides inline content

When message: is present, any inline title: or body text is ignored. A warning should appear in the browser console.

message: aitranslation
title: This title should be ignored
This body text should also be ignored. Check the console for a warning.

Missing icon

This callout uses a non-existent icon name. A broken image should appear where the icon would be.

title: Custom icon that does not exist
icon: nonexistent_icon
The icon to the left of this title should show as a broken image.

Toggle dark mode and check all four callout types still look correct.