mirror of
https://github.com/kbenestad/mdcms.git
synced 2026-06-18 15:24:32 +00:00
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
This commit is contained in:
parent
dd306b004c
commit
cd1e6e14ce
2 changed files with 30 additions and 8 deletions
|
|
@ -956,7 +956,8 @@ body {
|
||||||
const svg = getIcon(name);
|
const svg = getIcon(name);
|
||||||
const span = document.createElement('span');
|
const span = document.createElement('span');
|
||||||
span.className = 'mdcms-icon' + (className ? ' ' + className : '');
|
span.className = 'mdcms-icon' + (className ? ' ' + className : '');
|
||||||
span.innerHTML = svg || '<img src="" alt="" style="width:1em;height:1em;">';
|
const filename = normaliseIconName(name);
|
||||||
|
span.innerHTML = svg || '<img src="assets/icons/' + filename + '" alt="[missing: ' + filename + ']" style="width:1em;height:1em;display:inline-block;">';
|
||||||
return span;
|
return span;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1815,7 +1816,6 @@ function fmtDatetime(dtStr) {
|
||||||
};
|
};
|
||||||
|
|
||||||
function renderCalloutTag(container, tag) {
|
function renderCalloutTag(container, tag) {
|
||||||
console.log('[mdcms callout] tag:', tag.tagName, '| options:', JSON.stringify(tag.options), '| body:', (tag.body || '').slice(0, 60));
|
|
||||||
var typeMatch = tag.tagName.match(/^callout-(info|warning|success|error)$/);
|
var typeMatch = tag.tagName.match(/^callout-(info|warning|success|error)$/);
|
||||||
var calloutType = typeMatch ? typeMatch[1] : 'info';
|
var calloutType = typeMatch ? typeMatch[1] : 'info';
|
||||||
|
|
||||||
|
|
@ -1824,7 +1824,6 @@ function fmtDatetime(dtStr) {
|
||||||
var title = opts.title || null;
|
var title = opts.title || null;
|
||||||
var iconName = opts.icon || null;
|
var iconName = opts.icon || null;
|
||||||
var bodyMd = tag.body || '';
|
var bodyMd = tag.body || '';
|
||||||
console.log('[mdcms callout] title =', JSON.stringify(title), '| msgKey =', msgKey);
|
|
||||||
|
|
||||||
// Resolve message: key — config.yml callouts block
|
// Resolve message: key — config.yml callouts block
|
||||||
if (msgKey) {
|
if (msgKey) {
|
||||||
|
|
@ -1863,17 +1862,14 @@ function fmtDatetime(dtStr) {
|
||||||
container.style.setProperty('--callout-bg', hexToRgba(bgColour, 0.08));
|
container.style.setProperty('--callout-bg', hexToRgba(bgColour, 0.08));
|
||||||
|
|
||||||
if (title) {
|
if (title) {
|
||||||
console.log('[mdcms callout] creating title row:', title);
|
|
||||||
var titleRow = document.createElement('div');
|
var titleRow = document.createElement('div');
|
||||||
titleRow.className = 'mdcms-callout-title';
|
titleRow.className = 'mdcms-callout-title';
|
||||||
titleRow.style.color = primaryColour; // bypass CSS var cascade
|
titleRow.style.color = primaryColour;
|
||||||
titleRow.appendChild(iconEl(iconName));
|
titleRow.appendChild(iconEl(iconName));
|
||||||
var titleText = document.createElement('span');
|
var titleText = document.createElement('span');
|
||||||
titleText.textContent = title;
|
titleText.textContent = title;
|
||||||
titleRow.appendChild(titleText);
|
titleRow.appendChild(titleText);
|
||||||
container.appendChild(titleRow);
|
container.appendChild(titleRow);
|
||||||
} else {
|
|
||||||
console.log('[mdcms callout] no title — skipping title row');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (bodyMd) {
|
if (bodyMd) {
|
||||||
|
|
|
||||||
|
|
@ -68,10 +68,36 @@ This info callout uses the warning icon instead of the default info icon.
|
||||||
|
|
||||||
## Config-defined message (message: key)
|
## Config-defined message (message: key)
|
||||||
|
|
||||||
```mdcms callout-warning
|
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.
|
||||||
|
|
||||||
|
```mdcms callout-info
|
||||||
message: aitranslation
|
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.
|
||||||
|
|
||||||
|
```mdcms callout-info
|
||||||
|
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.
|
||||||
|
|
||||||
|
```mdcms callout-info
|
||||||
|
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.
|
Toggle dark mode and check all four callout types still look correct.
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue