tcsenpai/obsidiangarden_netlify
1
0
Fork 0
mirror of https://github.com/tcsenpai/obsidiangarden_netlify.git synced 2025-06-07 05:05:20 +00:00
Code Issues 5 Packages Projects Releases Wiki Activity

Support setting metadata on callouts and images

Browse Source
This commit is contained in:
Ole Eskild Steensen 2023-09-30 17:21:36 +02:00
parent ea4a85ac76
commit e95e7be370
1 changed files with 48 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
.eleventy.js
View File

@ -99,25 +99,25 @@ module.exports = function (eleventyConfig) {
let icon; let icon;
let color; let color;
let nbLinesToSkip = 0 let nbLinesToSkip = 0
for (let i = 0; i<4; i++) { for (let i = 0; i < 4; i++) {
if (parts[i] && parts[i].trim()) { if (parts[i] && parts[i].trim()) {
let line = parts[i] && parts[i].trim().toLowerCase() let line = parts[i] && parts[i].trim().toLowerCase()
if (line.startsWith("title:")) { if (line.startsWith("title:")) {
titleLine = line.substring(6); titleLine = line.substring(6);
nbLinesToSkip ++; nbLinesToSkip++;
} else if (line.startsWith("icon:")) { } else if (line.startsWith("icon:")) {
icon = line.substring(5); icon = line.substring(5);
nbLinesToSkip ++; nbLinesToSkip++;
} else if (line.startsWith("collapse:")) { } else if (line.startsWith("collapse:")) {
collapsible = true collapsible = true
collapse = line.substring(9); collapse = line.substring(9);
if (collapse && collapse.trim().toLowerCase() == 'open') { if (collapse && collapse.trim().toLowerCase() == 'open') {
collapsed = false collapsed = false
} }
nbLinesToSkip ++; nbLinesToSkip++;
} else if (line.startsWith("color:")) { } else if (line.startsWith("color:")) {
color = line.substring(6); color = line.substring(6);
nbLinesToSkip ++; nbLinesToSkip++;
} }
} }
} }
@ -127,18 +127,17 @@ module.exports = function (eleventyConfig) {
</svg> </svg>
</div>` : ""; </div>` : "";
const titleDiv = titleLine 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' : '' let collapseClasses = titleLine && collapsible ? 'is-collapsible' : ''
if (collapsible && collapsed) { if (collapsible && collapsed) {
collapseClasses += " is-collapsed" collapseClasses += " is-collapsed"
} }
let res = `<div data-callout-metadata class="callout ${collapseClasses}" data-callout="${ let res = `<div data-callout-metadata class="callout ${collapseClasses}" data-callout="${token.info.substring(3)
token.info.substring(3) }">${titleDiv}\n<div class="callout-content">${md.render(
}">${titleDiv}\n<div class="callout-content">${md.render( parts.slice(nbLinesToSkip).join("\n")
parts.slice(nbLinesToSkip).join("\n") )}</div></div>`;
)}</div></div>`;
return res return res
} }
@ -153,7 +152,21 @@ module.exports = function (eleventyConfig) {
}; };
md.renderer.rules.image = (tokens, idx, options, env, self) => { md.renderer.rules.image = (tokens, idx, options, env, self) => {
const imageName = tokens[idx].content; 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) { if (width) {
const widthIndex = tokens[idx].attrIndex("width"); const widthIndex = tokens[idx].attrIndex("width");
const widthAttr = `${width}px`; const widthAttr = `${width}px`;
@ -246,7 +259,7 @@ module.exports = function (eleventyConfig) {
deadLink = true; deadLink = true;
} }
if(deadLink){ if (deadLink) {
return `<a class="internal-link is-unresolved" href="/404">${title}</a>`; 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>`; return `<a class="internal-link" data-note-icon="${noteIcon}" href="${permalink}${headerLinkPath}">${title}</a>`;
@ -302,28 +315,30 @@ module.exports = function (eleventyConfig) {
let titleDiv = ""; let titleDiv = "";
let calloutType = ""; let calloutType = "";
let calloutMetaData = "";
let isCollapsable; let isCollapsable;
let isCollapsed; let isCollapsed;
const calloutMeta = /\[!([\w-]*)\](\+|\-){0,1}(\s?.*)/; const calloutMeta = /\[!([\w-]*)\|?(\s?.*)\](\+|\-){0,1}(\s?.*)/;
if (!content.match(calloutMeta)) { if (!content.match(calloutMeta)) {
continue; continue;
} }
content = content.replace( content = content.replace(
calloutMeta, calloutMeta,
function (metaInfoMatch, callout, collapse, title) { function (metaInfoMatch, callout, metaData, collapse, title) {
isCollapsable = Boolean(collapse); isCollapsable = Boolean(collapse);
isCollapsed = collapse === "-"; isCollapsed = collapse === "-";
const titleText = title.replace(/(<\/{0,1}\w+>)/, "") const titleText = title.replace(/(<\/{0,1}\w+>)/, "")
? title ? title
: `${callout.charAt(0).toUpperCase()}${callout : `${callout.charAt(0).toUpperCase()}${callout
.substring(1) .substring(1)
.toLowerCase()}`; .toLowerCase()}`;
const fold = isCollapsable const fold = isCollapsable
? `<div class="callout-fold"><i icon-name="chevron-down"></i></div>` ? `<div class="callout-fold"><i icon-name="chevron-down"></i></div>`
: ``; : ``;
calloutType = callout; calloutType = callout;
calloutMetaData = metaData;
titleDiv = `<div class="callout-title"><div class="callout-title-inner">${titleText}</div>${fold}</div>`; titleDiv = `<div class="callout-title"><div class="callout-title-inner">${titleText}</div>${fold}</div>`;
return ""; return "";
} }
@ -334,6 +349,7 @@ module.exports = function (eleventyConfig) {
blockquote.classList.add(isCollapsable ? "is-collapsible" : ""); blockquote.classList.add(isCollapsable ? "is-collapsible" : "");
blockquote.classList.add(isCollapsed ? "is-collapsed" : ""); blockquote.classList.add(isCollapsed ? "is-collapsed" : "");
blockquote.setAttribute("data-callout", calloutType.toLowerCase()); blockquote.setAttribute("data-callout", calloutType.toLowerCase());
calloutMetaData && blockquote.setAttribute("data-callout-metadata", calloutMetaData);
blockquote.innerHTML = `${titleDiv}\n<div class="callout-content">${content}</div>`; blockquote.innerHTML = `${titleDiv}\n<div class="callout-content">${content}</div>`;
} }
}; };
@ -344,8 +360,8 @@ module.exports = function (eleventyConfig) {
}); });
function fillPictureSourceSets(src, cls, alt, meta, width, imageTag) { function fillPictureSourceSets(src, cls, alt, meta, width, imageTag) {
imageTag.tagName = "picture"; imageTag.tagName = "picture";
let html = `<source let html = `<source
media="(max-width:480px)" media="(max-width:480px)"
srcset="${meta.webp[0].url}" srcset="${meta.webp[0].url}"
type="image/webp" type="image/webp"
@ -355,27 +371,27 @@ module.exports = function (eleventyConfig) {
srcset="${meta.jpeg[0].url}" srcset="${meta.jpeg[0].url}"
/> />
` `
if (meta.webp && meta.webp[1] && meta.webp[1].url) { if (meta.webp && meta.webp[1] && meta.webp[1].url) {
html += `<source html += `<source
media="(max-width:1920px)" media="(max-width:1920px)"
srcset="${meta.webp[1].url}" srcset="${meta.webp[1].url}"
type="image/webp" type="image/webp"
/>` />`
} }
if (meta.jpeg && meta.jpeg[1] && meta.jpeg[1].url) { if (meta.jpeg && meta.jpeg[1] && meta.jpeg[1].url) {
html += `<source html += `<source
media="(max-width:1920px)" media="(max-width:1920px)"
srcset="${meta.jpeg[1].url}" srcset="${meta.jpeg[1].url}"
/>` />`
} }
html += `<img html += `<img
class="${cls.toString()}" class="${cls.toString()}"
src="${src}" src="${src}"
alt="${alt}" alt="${alt}"
width="${width}" width="${width}"
/>`; />`;
imageTag.innerHTML = html; imageTag.innerHTML = html;
} }
eleventyConfig.addTransform("picture", function (str) { eleventyConfig.addTransform("picture", function (str) {
@ -477,7 +493,7 @@ module.exports = function (eleventyConfig) {
return variable; return variable;
}); });
eleventyConfig.addPlugin(pluginRss, { eleventyConfig.addPlugin(pluginRss, {
posthtmlRenderOptions: { posthtmlRenderOptions: {
closingSingleTag: "slash", closingSingleTag: "slash",
singleTags: ["link"], singleTags: ["link"],