feat: replace basic frontmatter display with structured accent card UI featuring badges, tags, and boolean flags
This commit is contained in:
+182
-16
@@ -135,23 +135,9 @@
|
||||
header.appendChild(actionsDiv);
|
||||
area.appendChild(header);
|
||||
|
||||
// Frontmatter
|
||||
// Frontmatter — Accent Card
|
||||
if (data.frontmatter && Object.keys(data.frontmatter).length > 0) {
|
||||
const fmSection = document.createElement("div");
|
||||
const fmToggle = document.createElement("div");
|
||||
fmToggle.className = "frontmatter-toggle";
|
||||
fmToggle.textContent = "▶ Frontmatter";
|
||||
const fmContent = document.createElement("div");
|
||||
fmContent.className = "frontmatter-content";
|
||||
fmContent.textContent = JSON.stringify(data.frontmatter, null, 2);
|
||||
|
||||
fmToggle.addEventListener("click", () => {
|
||||
fmContent.classList.toggle("open");
|
||||
fmToggle.textContent = fmContent.classList.contains("open") ? "▼ Frontmatter" : "▶ Frontmatter";
|
||||
});
|
||||
|
||||
fmSection.appendChild(fmToggle);
|
||||
fmSection.appendChild(fmContent);
|
||||
const fmSection = buildFrontmatterCard(data.frontmatter);
|
||||
area.appendChild(fmSection);
|
||||
}
|
||||
|
||||
@@ -197,6 +183,186 @@
|
||||
return item;
|
||||
}
|
||||
|
||||
function buildFrontmatterCard(frontmatter) {
|
||||
// Helper: format date
|
||||
function formatDate(iso) {
|
||||
if (!iso) return '—';
|
||||
const d = new Date(iso);
|
||||
const date = d.toISOString().slice(0, 10);
|
||||
const time = d.toTimeString().slice(0, 5);
|
||||
return `${date} · ${time}`;
|
||||
}
|
||||
|
||||
// Helper: create element
|
||||
function el(tag, className, children) {
|
||||
const e = document.createElement(tag);
|
||||
if (className) e.className = className;
|
||||
if (children) {
|
||||
children.forEach(c => { if (c) e.appendChild(c); });
|
||||
}
|
||||
return e;
|
||||
}
|
||||
|
||||
// Extract boolean flags
|
||||
const booleanFlags = ['publish', 'favoris', 'template', 'task', 'archive', 'draft', 'private']
|
||||
.map(key => ({ key, value: !!frontmatter[key] }));
|
||||
|
||||
// Toggle state
|
||||
let isOpen = true;
|
||||
|
||||
// Build header with chevron
|
||||
const chevron = el("span", "fm-chevron open");
|
||||
chevron.innerHTML = '<i data-lucide="chevron-down" style="width:14px;height:14px"></i>';
|
||||
|
||||
const fmHeader = el("div", "fm-header");
|
||||
fmHeader.appendChild(chevron);
|
||||
fmHeader.appendChild(document.createTextNode("Frontmatter"));
|
||||
|
||||
// ZONE 1: Top strip
|
||||
const acTop = el("div", "ac-top");
|
||||
|
||||
// Title badge
|
||||
const title = frontmatter.titre || frontmatter.title || '';
|
||||
if (title) {
|
||||
const titleSpan = el("span", "ac-title");
|
||||
titleSpan.textContent = `"${title}"`;
|
||||
acTop.appendChild(titleSpan);
|
||||
}
|
||||
|
||||
// Status badge
|
||||
if (frontmatter.statut) {
|
||||
const statusBadge = el("span", "ac-badge green");
|
||||
const dot = el("span", "ac-dot");
|
||||
statusBadge.appendChild(dot);
|
||||
statusBadge.appendChild(document.createTextNode(frontmatter.statut));
|
||||
acTop.appendChild(statusBadge);
|
||||
}
|
||||
|
||||
// Category badge
|
||||
if (frontmatter.catégorie || frontmatter.categorie) {
|
||||
const cat = frontmatter.catégorie || frontmatter.categorie;
|
||||
const catBadge = el("span", "ac-badge blue");
|
||||
catBadge.textContent = cat;
|
||||
acTop.appendChild(catBadge);
|
||||
}
|
||||
|
||||
// Publish badge
|
||||
if (frontmatter.publish) {
|
||||
const pubBadge = el("span", "ac-badge purple");
|
||||
pubBadge.textContent = "publié";
|
||||
acTop.appendChild(pubBadge);
|
||||
}
|
||||
|
||||
// Favoris badge
|
||||
if (frontmatter.favoris) {
|
||||
const favBadge = el("span", "ac-badge purple");
|
||||
favBadge.textContent = "favori";
|
||||
acTop.appendChild(favBadge);
|
||||
}
|
||||
|
||||
// ZONE 2: Body 2 columns
|
||||
const leftCol = el("div", "ac-col");
|
||||
|
||||
const row1 = el("div", "ac-row");
|
||||
row1.innerHTML = '<span class="ac-k">auteur</span><span class="ac-v">' + (frontmatter.auteur || '—') + '</span>';
|
||||
leftCol.appendChild(row1);
|
||||
|
||||
const row2 = el("div", "ac-row");
|
||||
row2.innerHTML = '<span class="ac-k">catégorie</span><span class="ac-v">' + (frontmatter.catégorie || frontmatter.categorie || '—') + '</span>';
|
||||
leftCol.appendChild(row2);
|
||||
|
||||
const row3 = el("div", "ac-row");
|
||||
row3.innerHTML = '<span class="ac-k">statut</span><span class="ac-v">' + (frontmatter.statut || '—') + '</span>';
|
||||
leftCol.appendChild(row3);
|
||||
|
||||
const row4 = el("div", "ac-row");
|
||||
const aliases = frontmatter.aliases && frontmatter.aliases.length > 0 ? frontmatter.aliases.join(', ') : '[]';
|
||||
row4.innerHTML = '<span class="ac-k">aliases</span><span class="ac-v muted">' + aliases + '</span>';
|
||||
leftCol.appendChild(row4);
|
||||
|
||||
const rightCol = el("div", "ac-col");
|
||||
|
||||
const row5 = el("div", "ac-row");
|
||||
row5.innerHTML = '<span class="ac-k">creation_date</span><span class="ac-v mono">' + formatDate(frontmatter.creation_date) + '</span>';
|
||||
rightCol.appendChild(row5);
|
||||
|
||||
const row6 = el("div", "ac-row");
|
||||
row6.innerHTML = '<span class="ac-k">modification_date</span><span class="ac-v mono">' + formatDate(frontmatter.modification_date) + '</span>';
|
||||
rightCol.appendChild(row6);
|
||||
|
||||
const row7 = el("div", "ac-row");
|
||||
row7.innerHTML = '<span class="ac-k">publish</span><span class="ac-v">' + String(frontmatter.publish || false) + '</span>';
|
||||
rightCol.appendChild(row7);
|
||||
|
||||
const row8 = el("div", "ac-row");
|
||||
row8.innerHTML = '<span class="ac-k">favoris</span><span class="ac-v">' + String(frontmatter.favoris || false) + '</span>';
|
||||
rightCol.appendChild(row8);
|
||||
|
||||
const acBody = el("div", "ac-body");
|
||||
acBody.appendChild(leftCol);
|
||||
acBody.appendChild(rightCol);
|
||||
|
||||
// ZONE 3: Tags row
|
||||
const acTagsRow = el("div", "ac-tags-row");
|
||||
const tagsLabel = el("span", "ac-tags-k");
|
||||
tagsLabel.textContent = "tags";
|
||||
acTagsRow.appendChild(tagsLabel);
|
||||
|
||||
const tagsWrap = el("div", "ac-tags-wrap");
|
||||
if (frontmatter.tags && frontmatter.tags.length > 0) {
|
||||
frontmatter.tags.forEach(tag => {
|
||||
const tagSpan = el("span", "ac-tag");
|
||||
tagSpan.textContent = tag;
|
||||
tagsWrap.appendChild(tagSpan);
|
||||
});
|
||||
}
|
||||
acTagsRow.appendChild(tagsWrap);
|
||||
|
||||
// ZONE 4: Flags row
|
||||
const acFlagsRow = el("div", "ac-flags-row");
|
||||
const flagsLabel = el("span", "ac-flags-k");
|
||||
flagsLabel.textContent = "flags";
|
||||
acFlagsRow.appendChild(flagsLabel);
|
||||
|
||||
booleanFlags.forEach(flag => {
|
||||
const chipClass = flag.value ? "flag-chip on" : "flag-chip off";
|
||||
const chip = el("span", chipClass);
|
||||
const dot = el("span", "flag-dot");
|
||||
chip.appendChild(dot);
|
||||
chip.appendChild(document.createTextNode(flag.key));
|
||||
acFlagsRow.appendChild(chip);
|
||||
});
|
||||
|
||||
// Assemble the card
|
||||
const acCard = el("div", "ac-card");
|
||||
acCard.appendChild(acTop);
|
||||
acCard.appendChild(acBody);
|
||||
acCard.appendChild(acTagsRow);
|
||||
acCard.appendChild(acFlagsRow);
|
||||
|
||||
// Toggle functionality
|
||||
fmHeader.addEventListener("click", () => {
|
||||
isOpen = !isOpen;
|
||||
if (isOpen) {
|
||||
acCard.style.display = "block";
|
||||
chevron.classList.remove("closed");
|
||||
chevron.classList.add("open");
|
||||
} else {
|
||||
acCard.style.display = "none";
|
||||
chevron.classList.remove("open");
|
||||
chevron.classList.add("closed");
|
||||
}
|
||||
if (window.lucide) window.lucide.createIcons();
|
||||
});
|
||||
|
||||
// Wrap in section
|
||||
const fmSection = el("div", "fm-section");
|
||||
fmSection.appendChild(fmHeader);
|
||||
fmSection.appendChild(acCard);
|
||||
|
||||
return fmSection;
|
||||
}
|
||||
|
||||
window.onload = initPopout;
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user