mirror of
https://github.com/tcsenpai/obsidiangarden_netlify.git
synced 2025-06-05 12:25:20 +00:00
302 lines
9.4 KiB
JavaScript
302 lines
9.4 KiB
JavaScript
const slugify = require("@sindresorhus/slugify");
|
|
const markdownIt = require("markdown-it");
|
|
const fs = require("fs");
|
|
const matter = require("gray-matter");
|
|
const faviconPlugin = require("eleventy-favicon");
|
|
const tocPlugin = require("eleventy-plugin-toc");
|
|
const { parse } = require("node-html-parser");
|
|
|
|
const { headerToId, namedHeadingsFilter } = require("./src/helpers/utils");
|
|
|
|
module.exports = function (eleventyConfig) {
|
|
let markdownLib = markdownIt({
|
|
breaks: true,
|
|
html: true,
|
|
})
|
|
.use(require("markdown-it-footnote"))
|
|
.use(function (md) {
|
|
md.renderer.rules.hashtag_open = function (tokens, idx) {
|
|
return '<a class="tag" onclick="toggleTagSearch(this)">';
|
|
};
|
|
})
|
|
.use(require("markdown-it-mathjax3"), {
|
|
tex: {
|
|
inlineMath: [["$", "$"]],
|
|
},
|
|
options: {
|
|
skipHtmlTags: { "[-]": ["pre"] },
|
|
},
|
|
})
|
|
.use(require("markdown-it-attrs"))
|
|
.use(require("markdown-it-task-checkbox"), {
|
|
disabled: true,
|
|
divWrap: false,
|
|
divClass: "checkbox",
|
|
idPrefix: "cbx_",
|
|
ulClass: "task-list",
|
|
liClass: "task-list-item",
|
|
})
|
|
.use(require("markdown-it-plantuml"), {
|
|
openMarker: "```plantuml",
|
|
closeMarker: "```",
|
|
})
|
|
.use(namedHeadingsFilter)
|
|
.use(function (md) {
|
|
//https://github.com/DCsunset/markdown-it-mermaid-plugin
|
|
const origFenceRule =
|
|
md.renderer.rules.fence ||
|
|
function (tokens, idx, options, env, self) {
|
|
return self.renderToken(tokens, idx, options, env, self);
|
|
};
|
|
md.renderer.rules.fence = (tokens, idx, options, env, slf) => {
|
|
const token = tokens[idx];
|
|
if (token.info === "mermaid") {
|
|
const code = token.content.trim();
|
|
return `<pre class="mermaid">${code}</pre>`;
|
|
}
|
|
if (token.info === "transclusion") {
|
|
const code = token.content.trim();
|
|
return `<div class="transclusion">${md.render(code)}</div>`;
|
|
}
|
|
if (token.info.startsWith("ad-")) {
|
|
const code = token.content.trim();
|
|
if (code && code.toLowerCase().startsWith("title:")) {
|
|
const title = code.substring(6, code.indexOf("\n"));
|
|
const titleDiv = title
|
|
? `<div class="callout-title"><div class="callout-title-inner">${title}</div></div>`
|
|
: "";
|
|
|
|
return `<div class="callout" data-callout="${
|
|
token.info
|
|
}">${titleDiv}\n<div class="callout-content">${md.render(
|
|
code.slice(code.indexOf("\n"))
|
|
)}</div></div>`;
|
|
}
|
|
|
|
const title = `<div class="callout-title"><div class="callout-title-inner">${token.info
|
|
.charAt(3)
|
|
.toUpperCase()}${token.info
|
|
.substring(4)
|
|
.toLowerCase()}</div></div>`;
|
|
|
|
return `<div class="callout" data-callout="${
|
|
token.info
|
|
}">${title}\n<div class="callout-content">${md.render(
|
|
code
|
|
)}</div></div>`;
|
|
}
|
|
|
|
// Other languages
|
|
return origFenceRule(tokens, idx, options, env, slf);
|
|
};
|
|
|
|
const defaultImageRule =
|
|
md.renderer.rules.image ||
|
|
function (tokens, idx, options, env, self) {
|
|
return self.renderToken(tokens, idx, options, env, self);
|
|
};
|
|
md.renderer.rules.image = (tokens, idx, options, env, self) => {
|
|
const imageName = tokens[idx].content;
|
|
const [fileName, width] = imageName.split("|");
|
|
if (width) {
|
|
const widthIndex = tokens[idx].attrIndex("width");
|
|
const widthAttr = `${width}px`;
|
|
if (widthIndex < 0) {
|
|
tokens[idx].attrPush(["width", widthAttr]);
|
|
} else {
|
|
tokens[idx].attrs[widthIndex][1] = widthAttr;
|
|
}
|
|
}
|
|
|
|
return defaultImageRule(tokens, idx, options, env, self);
|
|
};
|
|
|
|
const defaultLinkRule =
|
|
md.renderer.rules.link_open ||
|
|
function (tokens, idx, options, env, self) {
|
|
return self.renderToken(tokens, idx, options, env, self);
|
|
};
|
|
md.renderer.rules.link_open = function (tokens, idx, options, env, self) {
|
|
const aIndex = tokens[idx].attrIndex("target");
|
|
const classIndex = tokens[idx].attrIndex("class");
|
|
|
|
if (aIndex < 0) {
|
|
tokens[idx].attrPush(["target", "_blank"]);
|
|
} else {
|
|
tokens[idx].attrs[aIndex][1] = "_blank";
|
|
}
|
|
|
|
if (classIndex < 0) {
|
|
tokens[idx].attrPush(["class", "external-link"]);
|
|
} else {
|
|
tokens[idx].attrs[classIndex][1] = "external-link";
|
|
}
|
|
|
|
return defaultLinkRule(tokens, idx, options, env, self);
|
|
};
|
|
});
|
|
|
|
eleventyConfig.setLibrary("md", markdownLib);
|
|
|
|
eleventyConfig.addFilter("link", function (str) {
|
|
return (
|
|
str &&
|
|
str.replace(/\[\[(.*?\|.*?)\]\]/g, function (match, p1) {
|
|
//Check if it is an embedded excalidraw drawing or mathjax javascript
|
|
if (p1.indexOf("],[") > -1 || p1.indexOf('"$"') > -1) {
|
|
return match;
|
|
}
|
|
const [fileLink, linkTitle] = p1.split("|");
|
|
|
|
let fileName = fileLink;
|
|
let header = "";
|
|
let headerLinkPath = "";
|
|
if (fileLink.includes("#")) {
|
|
[fileName, header] = fileLink.split("#");
|
|
headerLinkPath = `#${headerToId(header)}`;
|
|
}
|
|
|
|
let permalink = `/notes/${slugify(fileName)}`;
|
|
const title = linkTitle ? linkTitle : fileName;
|
|
let deadLink = false;
|
|
|
|
try {
|
|
const startPath = "./src/site/notes/";
|
|
const fullPath = fileName.endsWith(".md")
|
|
? `${startPath}${fileName}`
|
|
: `${startPath}${fileName}.md`;
|
|
const file = fs.readFileSync(fullPath, "utf8");
|
|
const frontMatter = matter(file);
|
|
if (frontMatter.data.permalink) {
|
|
permalink = frontMatter.data.permalink;
|
|
}
|
|
} catch {
|
|
deadLink = true;
|
|
}
|
|
|
|
return `<a class="internal-link ${
|
|
deadLink ? "is-unresolved" : ""
|
|
}" href="${permalink}${headerLinkPath}">${title}</a>`;
|
|
})
|
|
);
|
|
});
|
|
|
|
eleventyConfig.addFilter("highlight", function (str) {
|
|
return (
|
|
str &&
|
|
str.replace(/\=\=(.*?)\=\=/g, function (match, p1) {
|
|
return `<mark>${p1}</mark>`;
|
|
})
|
|
);
|
|
});
|
|
|
|
eleventyConfig.addFilter("taggify", function (str) {
|
|
return (
|
|
str &&
|
|
str.replace(
|
|
/(^|\s|\>)(#[^\s!@#$%^&*()=+\.\/,\[{\]};:'"?><]+)(?!([^<]*>))/g,
|
|
function (match, precede, tag) {
|
|
return `${precede}<a class="tag" onclick="toggleTagSearch(this)">${tag}</a>`;
|
|
}
|
|
)
|
|
);
|
|
});
|
|
|
|
eleventyConfig.addFilter("searchableTags", function (str) {
|
|
let tags;
|
|
let match =
|
|
str &&
|
|
str.match(
|
|
/(^|\s|\>)(#[^\s!@#$%^&*()=+\.\/,\[{\]};:'"?><]+)(?!([^<]*>))/g
|
|
);
|
|
if (match) {
|
|
tags = match
|
|
.map((m) => {
|
|
return `"${m.split("#")[1]}"`;
|
|
})
|
|
.join(", ");
|
|
}
|
|
if (tags) {
|
|
return `${tags},`;
|
|
} else {
|
|
return "";
|
|
}
|
|
});
|
|
|
|
eleventyConfig.addTransform("callout-block", function (str) {
|
|
const parsed = parse(str);
|
|
|
|
const transformCalloutBlocks = (
|
|
blockquotes = parsed.querySelectorAll("blockquote")
|
|
) => {
|
|
for (const blockquote of blockquotes) {
|
|
transformCalloutBlocks(blockquote.querySelectorAll("blockquote"));
|
|
|
|
let content = blockquote.innerHTML;
|
|
|
|
let titleDiv = "";
|
|
let calloutType = "";
|
|
let isCollapsable;
|
|
let isCollapsed;
|
|
const calloutMeta = /\[!(\w*)\](\+|\-){0,1}(\s?.*)/;
|
|
if (!content.match(calloutMeta)) {
|
|
continue;
|
|
}
|
|
|
|
content = content.replace(
|
|
calloutMeta,
|
|
function (metaInfoMatch, callout, collapse, title) {
|
|
isCollapsable = Boolean(collapse);
|
|
isCollapsed = collapse === "-";
|
|
const titleText = title.replace(/(<\/{0,1}\w+>)/, "")
|
|
? title
|
|
: `${callout.charAt(0).toUpperCase()}${callout
|
|
.substring(1)
|
|
.toLowerCase()}`;
|
|
const fold = isCollapsable
|
|
? `<div class="callout-fold"><i icon-name="chevron-down"></i></div>`
|
|
: ``;
|
|
|
|
calloutType = callout;
|
|
titleDiv = `<div class="callout-title"><div class="callout-title-inner">${titleText}</div>${fold}</div>`;
|
|
return "";
|
|
}
|
|
);
|
|
|
|
blockquote.tagName = "div";
|
|
blockquote.classList.add("callout");
|
|
blockquote.classList.add(isCollapsable ? "is-collapsible" : "");
|
|
blockquote.classList.add(isCollapsed ? "is-collapsed" : "");
|
|
blockquote.setAttribute("data-callout", calloutType.toLowerCase());
|
|
blockquote.innerHTML = `${titleDiv}\n<div class="callout-content">${content}</div>`;
|
|
}
|
|
};
|
|
|
|
transformCalloutBlocks();
|
|
|
|
return str && parsed.innerHTML;
|
|
});
|
|
|
|
eleventyConfig.addPassthroughCopy("src/site/img");
|
|
eleventyConfig.addPlugin(faviconPlugin, { destination: "dist" });
|
|
eleventyConfig.addPlugin(tocPlugin, {
|
|
ul: true,
|
|
tags: ["h1", "h2", "h3", "h4", "h5", "h6"],
|
|
});
|
|
eleventyConfig.addFilter("jsonify", function (variable) {
|
|
return JSON.stringify(variable) || '""';
|
|
});
|
|
|
|
return {
|
|
dir: {
|
|
input: "src/site",
|
|
output: "dist",
|
|
data: `_data`,
|
|
},
|
|
templateFormats: ["njk", "md", "11ty.js", "css"],
|
|
htmlTemplateEngine: "njk",
|
|
markdownTemplateEngine: "njk",
|
|
passthroughFileCopy: true,
|
|
};
|
|
};
|