Skip to content

Commit

Permalink
Support setting metadata on callouts and images
Browse files Browse the repository at this point in the history
  • Loading branch information
@oleeskild
oleeskild committed Sep 30, 2023
1 parent ea4a85a commit e95e7be
Showing 1 changed file with 48 additions and 32 deletions.
80 changes: 48 additions & 32 deletions .eleventy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,25 +99,25 @@ module.exports = function (eleventyConfig) {
let icon;
let color;
let nbLinesToSkip = 0
for (let i = 0; i<4; i++) {
for (let i = 0; i < 4; i++) {
if (parts[i] && parts[i].trim()) {
let line = parts[i] && parts[i].trim().toLowerCase()
if (line.startsWith("title:")) {
titleLine = line.substring(6);
nbLinesToSkip ++;
nbLinesToSkip++;
} else if (line.startsWith("icon:")) {
icon = line.substring(5);
nbLinesToSkip ++;
nbLinesToSkip++;
} else if (line.startsWith("collapse:")) {
collapsible = true
collapse = line.substring(9);
if (collapse && collapse.trim().toLowerCase() == 'open') {
collapsed = false
}
nbLinesToSkip ++;
nbLinesToSkip++;
} else if (line.startsWith("color:")) {
color = line.substring(6);
nbLinesToSkip ++;
nbLinesToSkip++;
}
}
}
Expand All @@ -127,18 +127,17 @@ module.exports = function (eleventyConfig) {
</svg>
</div>` : "";
const titleDiv = titleLine
? `<div class="callout-title"><div class="callout-title-inner">${titleLine}</div>${foldDiv}</div>`
: "";
? `<div class="callout-title"><div class="callout-title-inner">${titleLine}</div>${foldDiv}</div>`
: "";
let collapseClasses = titleLine && collapsible ? 'is-collapsible' : ''
if (collapsible && collapsed) {
collapseClasses += " is-collapsed"
}

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>`;
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>`;
return res
}

Expand All @@ -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`;
Expand Down Expand Up @@ -246,7 +259,7 @@ module.exports = function (eleventyConfig) {
deadLink = true;
}

if(deadLink){
if (deadLink) {
return `<a class="internal-link is-unresolved" href="/404">${title}</a>`;
}
return `<a class="internal-link" data-note-icon="${noteIcon}" href="${permalink}${headerLinkPath}">${title}</a>`;
Expand Down Expand Up @@ -302,28 +315,30 @@ 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+>)/, "")
? title
: `${callout.charAt(0).toUpperCase()}${callout
.substring(1)
.toLowerCase()}`;
.substring(1)
.toLowerCase()}`;
const fold = isCollapsable
? `<div class="callout-fold"><i icon-name="chevron-down"></i></div>`
: ``;

calloutType = callout;
calloutMetaData = metaData;
titleDiv = `<div class="callout-title"><div class="callout-title-inner">${titleText}</div>${fold}</div>`;
return "";
}
Expand All @@ -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>`;
}
};
Expand All @@ -344,8 +360,8 @@ module.exports = function (eleventyConfig) {
});

function fillPictureSourceSets(src, cls, alt, meta, width, imageTag) {
imageTag.tagName = "picture";
let html = `<source
imageTag.tagName = "picture";
let html = `<source
media="(max-width:480px)"
srcset="${meta.webp[0].url}"
type="image/webp"
Expand All @@ -355,28 +371,28 @@ module.exports = function (eleventyConfig) {
srcset="${meta.jpeg[0].url}"
/>
`
if (meta.webp && meta.webp[1] && meta.webp[1].url) {
html += `<source
if (meta.webp && meta.webp[1] && meta.webp[1].url) {
html += `<source
media="(max-width:1920px)"
srcset="${meta.webp[1].url}"
type="image/webp"
/>`
}
if (meta.jpeg && meta.jpeg[1] && meta.jpeg[1].url) {
html += `<source
}
if (meta.jpeg && meta.jpeg[1] && meta.jpeg[1].url) {
html += `<source
media="(max-width:1920px)"
srcset="${meta.jpeg[1].url}"
/>`
}
html += `<img
}
html += `<img
class="${cls.toString()}"
src="${src}"
alt="${alt}"
width="${width}"
/>`;
imageTag.innerHTML = html;
}
imageTag.innerHTML = html;
}


eleventyConfig.addTransform("picture", function (str) {
const parsed = parse(str);
Expand Down Expand Up @@ -458,7 +474,7 @@ module.exports = function (eleventyConfig) {
ul: true,
tags: ["h1", "h2", "h3", "h4", "h5", "h6"],
});


eleventyConfig.addFilter("dateToZulu", function (date) {
if (!date) return "";
Expand All @@ -477,7 +493,7 @@ module.exports = function (eleventyConfig) {
return variable;
});

eleventyConfig.addPlugin(pluginRss, {
eleventyConfig.addPlugin(pluginRss, {
posthtmlRenderOptions: {
closingSingleTag: "slash",
singleTags: ["link"],
Expand Down

0 comments on commit e95e7be

Please sign in to comment.