Support setting metadata on callouts and images

This commit is contained in:
Ole Eskild Steensen 2023-09-30 17:21:36 +02:00
parent ea4a85ac76
commit e95e7be370

View File

@ -134,8 +134,7 @@ module.exports = function (eleventyConfig) {
collapseClasses += " is-collapsed"
}
let res = `<div data-callout-metadata class="callout ${collapseClasses}" data-callout="${
token.info.substring(3)
let res = `<div data-callout-metadata class="callout ${collapseClasses}" data-callout="${token.info.substring(3)
}">${titleDiv}\n<div class="callout-content">${md.render(
parts.slice(nbLinesToSkip).join("\n")
)}</div></div>`;
@ -153,7 +152,21 @@ module.exports = function (eleventyConfig) {
};
md.renderer.rules.image = (tokens, idx, options, env, self) => {
const imageName = tokens[idx].content;
const [fileName, width] = imageName.split("|");
//"image.png|metadata?|width"
const [fileName, ...widthAndMetaData] = imageName.split("|");
const lastValue = widthAndMetaData[widthAndMetaData.length - 1];
const lastValueIsNumber = !isNaN(lastValue);
const width = lastValueIsNumber ? lastValue : null;
let metaData = "";
if (widthAndMetaData.length > 1) {
metaData = widthAndMetaData.slice(0, widthAndMetaData.length - 1).join(" ");
}
if (!lastValueIsNumber) {
metaData += ` ${lastValue}`;
}
if (width) {
const widthIndex = tokens[idx].attrIndex("width");
const widthAttr = `${width}px`;
@ -302,16 +315,17 @@ module.exports = function (eleventyConfig) {
let titleDiv = "";
let calloutType = "";
let calloutMetaData = "";
let isCollapsable;
let isCollapsed;
const calloutMeta = /\[!([\w-]*)\](\+|\-){0,1}(\s?.*)/;
const calloutMeta = /\[!([\w-]*)\|?(\s?.*)\](\+|\-){0,1}(\s?.*)/;
if (!content.match(calloutMeta)) {
continue;
}
content = content.replace(
calloutMeta,
function (metaInfoMatch, callout, collapse, title) {
function (metaInfoMatch, callout, metaData, collapse, title) {
isCollapsable = Boolean(collapse);
isCollapsed = collapse === "-";
const titleText = title.replace(/(<\/{0,1}\w+>)/, "")
@ -324,6 +338,7 @@ module.exports = function (eleventyConfig) {
: ``;
calloutType = callout;
calloutMetaData = metaData;
titleDiv = `<div class="callout-title"><div class="callout-title-inner">${titleText}</div>${fold}</div>`;
return "";
}
@ -334,6 +349,7 @@ module.exports = function (eleventyConfig) {
blockquote.classList.add(isCollapsable ? "is-collapsible" : "");
blockquote.classList.add(isCollapsed ? "is-collapsed" : "");
blockquote.setAttribute("data-callout", calloutType.toLowerCase());
calloutMetaData && blockquote.setAttribute("data-callout-metadata", calloutMetaData);
blockquote.innerHTML = `${titleDiv}\n<div class="callout-content">${content}</div>`;
}
};