bahmcloud/bahmcloud_store
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 8 Wiki Activity

custom_components/bahmcloud_store/panel/panel.js aktualisiert

Browse Source
This commit is contained in:
René Bachmann
2026-01-15 11:24:44 +00:00
parent 08a59ec56e
commit 236099e562
1 changed files with 40 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
custom_components/bahmcloud_store/panel/panel.js
View File

@@ -21,10 +21,8 @@ class BahmcloudStorePanel extends HTMLElement {
this._readmeLoading = false;
this._readmeText = null;
this._readmeHtml = null;
this._readmeHtml = null; // backend may provide; we don't rely on it anymore
this._readmeError = null;
this._mdMountToken = 0;
}
set hass(hass) {
@@ -333,26 +331,10 @@ class BahmcloudStorePanel extends HTMLElement {
details{ margin-top: 10px; }
summary{ cursor:pointer; color: var(--bcs-accent); font-weight: 900; }
/* Pretty markdown (server rendered HTML) */
/* Pretty Markdown container spacing (ha-markdown renders inside) */
.md { line-height: 1.65; font-size: 14px; }
.md h1,.md h2,.md h3{ margin: 18px 0 10px; }
.md p{ margin: 10px 0; }
.md code{ padding: 2px 6px; border-radius: 8px; border: 1px solid var(--divider-color); }
.md pre{
padding: 12px;
border-radius: 14px;
border: 1px solid var(--divider-color);
overflow: auto;
}
.md blockquote{
margin: 10px 0;
padding: 8px 12px;
border-left: 4px solid var(--bcs-accent);
background: color-mix(in srgb, var(--bcs-accent) 8%, var(--card-background-color));
border-radius: 12px;
}
.md table{ width:100%; border-collapse: collapse; }
.md th,.md td{ border: 1px solid var(--divider-color); padding: 8px; text-align: left; }
.md :is(h1,h2,h3){ margin: 18px 0 10px; }
.md :is(p,ul,ol,pre,blockquote,table){ margin: 10px 0; }
</style>
<div class="mobilebar">
@@ -621,7 +603,7 @@ class BahmcloudStorePanel extends HTMLElement {
<div class="card">
<div class="row" style="align-items:center;">
<div><strong>README</strong></div>
<div class="muted small">${this._readmeHtml ? "Rendered Markdown" : "Raw Markdown (renderer unavailable)"}</div>
<div class="muted small">Rendered Markdown</div>
</div>
<div id="readmePretty" class="md" style="margin-top:12px;"></div>
@@ -679,14 +661,43 @@ class BahmcloudStorePanel extends HTMLElement {
_wireDetail() {
const root = this.shadowRoot;
const pretty = root.getElementById("readmePretty");
if (!pretty) return;
const mount = root.getElementById("readmePretty");
if (!mount) return;
if (this._readmeHtml) {
pretty.innerHTML = this._readmeHtml;
} else if (this._readmeText) {
pretty.innerHTML = `<div class="muted">Markdown rendering is not available on this system. Use “Show raw Markdown”.</div>`;
// Always prefer HA's frontend markdown renderer to get a professional look.
// This uses the same renderer concept as HA's Markdown card (Marked.js). :contentReference[oaicite:1]{index=1}
if (this._readmeText) {
try {
mount.innerHTML = "";
const el = document.createElement("ha-markdown");
// Ensure it has access to HA context (themes, link handling, etc.)
el.hass = this._hass;
// Different HA versions use either "content" or "markdown" internally;
// setting both is harmless and maximizes compatibility.
el.content = this._readmeText;
el.markdown = this._readmeText;
// Some versions support these flags; safe to set even if ignored.
el.allowHtml = false;
el.breaks = true;
mount.appendChild(el);
return;
} catch (_) {
// fall through to html/raw fallback
}
}
// Fallback: if backend provided sanitized HTML, use it
if (this._readmeHtml) {
mount.innerHTML = this._readmeHtml;
return;
}
// Last resort: show nothing here (raw is still available via details)
mount.innerHTML = `<div class="muted">Unable to render Markdown on this client.</div>`;
}
_renderFabs() {