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

Added support for callout blocks

Browse Source
This commit is contained in:
Ole Eskild Steensen 2022-04-07 19:37:18 +02:00
parent bdc7f195e4
commit 0a11495310
4 changed files with 413 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
.eleventy.js
View File

@ -12,10 +12,12 @@ module.exports = function(eleventyConfig) {
.use(require("markdown-it-footnote")) .use(require("markdown-it-footnote"))
.use(require('markdown-it-mathjax3'), { .use(require('markdown-it-mathjax3'), {
tex: { tex: {
inlineMath: [["$", "$"]] inlineMath: [
["$", "$"]
]
}, },
options: { options: {
skipHtmlTags: {'[-]': ['pre']} skipHtmlTags: { '[-]': ['pre'] }
} }
}) })
.use(require('markdown-it-task-checkbox'), { .use(require('markdown-it-task-checkbox'), {
@ -102,6 +104,7 @@ module.exports = function(eleventyConfig) {
return defaultLinkRule(tokens, idx, options, env, self); return defaultLinkRule(tokens, idx, options, env, self);
}; };
}); });
eleventyConfig.setLibrary("md", markdownLib); eleventyConfig.setLibrary("md", markdownLib);
@ -117,14 +120,14 @@ module.exports = function(eleventyConfig) {
let fileName = fileLink; let fileName = fileLink;
let header = ""; let header = "";
let headerLinkPath = ""; let headerLinkPath = "";
if(fileLink.includes("#")){ if (fileLink.includes("#")) {
[fileName, header] = fileLink.split("#"); [fileName, header] = fileLink.split("#");
headerLinkPath = `#${headerToId(header)}`; headerLinkPath = `#${headerToId(header)}`;
} }
let permalink = `/notes/${slugify(fileName)}`; let permalink = `/notes/${slugify(fileName)}`;
const title = linkTitle ? linkTitle : fileName; const title = linkTitle ? linkTitle : fileName;
try { try {
const file = fs.readFileSync(`./src/site/notes/${fileName}.md`, 'utf8'); const file = fs.readFileSync(`./src/site/notes/${fileName}.md`, 'utf8');
@ -146,6 +149,26 @@ module.exports = function(eleventyConfig) {
}); });
}); });
eleventyConfig.addTransform('callout-block', function(str) {
return str && str.replace(/<blockquote>((.|\n)*)<\/blockquote>/g, function(match, content) {
let titleDiv = "";
let calloutType = "";
content = content.replace(/\[!(\w*)\](\s?.*)/g, function(metaInfoMatch, callout, title) {
calloutType = callout;
titleDiv = title.replace("<br>", "") ?
`<div class="admonition-title">${title}</div>` :
`<div class="admonition-title">${callout.charAt(0).toUpperCase()}${callout.substring(1).toLowerCase()}</div>`;
return "";
});
return `<div class="callout-${calloutType} admonition admonition-example admonition-plugin">
${titleDiv}
${content}
</div>`;
});
});
eleventyConfig.addPassthroughCopy("src/site/img"); eleventyConfig.addPassthroughCopy("src/site/img");
eleventyConfig.addPlugin(faviconPlugin, { destination: 'dist' }); eleventyConfig.addPlugin(faviconPlugin, { destination: 'dist' });
@ -163,46 +186,46 @@ module.exports = function(eleventyConfig) {
}; };
function headerToId(heading){ function headerToId(heading) {
return slugify(heading); return slugify(heading);
} }
//https://github.com/rstacruz/markdown-it-named-headings/blob/master/index.js //https://github.com/rstacruz/markdown-it-named-headings/blob/master/index.js
function namedHeadingsFilter(md, options){ function namedHeadingsFilter(md, options) {
md.core.ruler.push('named_headings', namedHeadings.bind(null, md)); md.core.ruler.push('named_headings', namedHeadings.bind(null, md));
} }
function namedHeadings (md, state) { function namedHeadings(md, state) {
var ids = {} var ids = {}
state.tokens.forEach(function (token, i) { state.tokens.forEach(function(token, i) {
if (token.type === 'heading_open') { if (token.type === 'heading_open') {
var text = md.renderer.render(state.tokens[i + 1].children, md.options) var text = md.renderer.render(state.tokens[i + 1].children, md.options)
var id = headerToId(text); var id = headerToId(text);
var uniqId = uncollide(ids, id) var uniqId = uncollide(ids, id)
ids[uniqId] = true ids[uniqId] = true
setAttr(token, 'id', uniqId) setAttr(token, 'id', uniqId)
}
})
}
function uncollide(ids, id) {
if (!ids[id]) return id
var i = 1
while (ids[id + '-' + i]) { i++ }
return id + '-' + i
}
function setAttr(token, attr, value, options) {
var idx = token.attrIndex(attr)
if (idx === -1) {
token.attrPush([attr, value])
} else if (options && options.append) {
token.attrs[idx][1] =
token.attrs[idx][1] + ' ' + value
} else {
token.attrs[idx][1] = value
} }
}) }
}
function uncollide (ids, id) {
if (!ids[id]) return id
var i = 1
while (ids[id + '-' + i]) { i++ }
return id + '-' + i
}
function setAttr (token, attr, value, options) {
var idx = token.attrIndex(attr)
if (idx === -1) {
token.attrPush([ attr, value ])
} else if (options && options.append) {
token.attrs[idx][1] =
token.attrs[idx][1] + ' ' + value
} else {
token.attrs[idx][1] = value
}
}

101
src/site/notes/Set up your own digital garden.md Normal file
View File

File diff suppressed because one or more lines are too long

50
src/site/notes/home.md Normal file
View File

File diff suppressed because one or more lines are too long

287
src/site/styles/digital-garden-base.scss
View File

@ -23,6 +23,7 @@
.markdown-preview-view pre.mermaid { .markdown-preview-view pre.mermaid {
background: white; background: white;
border-radius: 25px; border-radius: 25px;
padding: 10px;
} }
div.translusion { div.translusion {
@ -34,7 +35,8 @@ div.translusion {
font-size: 1.4rem; font-size: 1.4rem;
} }
div[class*="language-ad-"] .admonition-title::befforee { div[class*="language-ad-"] .admonition-title::before,
div[class*="callout-"] .admonition-title::before {
font-size: 1.4rem; font-size: 1.4rem;
margin-bottom: 10px; margin-bottom: 10px;
margin-right: 10px; margin-right: 10px;
@ -58,7 +60,8 @@ ul.task-list {
padding: 0; padding: 0;
} }
div[class*="language-ad-"] { div[class*="language-ad-"],
div[class*="callout-"] {
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
word-wrap: break-word; word-wrap: break-word;
border-radius: 6px; border-radius: 6px;
@ -73,226 +76,338 @@ div[class*="language-ad-"] {
white-space: normal !important; white-space: normal !important;
} }
div.language-ad-note .admonition-title::before { div.language-ad-note,
content: "🖊️"; div.callout-note {
.admonition-title::before {
content: "🖊️";
}
} }
div.language-ad-tip .admonition-title::before { div.language-ad-tip,
content: "💡"; div.callout-tip {
.admonition-title::before {
content: "💡";
}
} }
div.language-ad-warning .admonition-title::before { div.language-ad-warning,
content: "⚠️"; div.callout-warning {
.admonition-title::before {
content: "⚠️";
}
} }
div.language-ad-important .admonition-title::before { div.language-ad-important,
content: "❗️"; div.callout-important {
.admonition-title::before {
content: "❗️";
}
} }
div.language-ad-caution .admonition-title::before { div.language-ad-caution,
content: "⚠️"; div.callout-caution {
.admonition-title::before {
content: "⚠️";
}
} }
div.language-ad-info .admonition-title::before { div.language-ad-info,
content: "ℹ"; div.callout-info {
.admonition-title::before {
content: "ℹ";
}
} }
div.language-ad-example .admonition-title::before { div.language-ad-example,
content: "🗒️"; div.callout-example {
.admonition-title::before {
content: "🗒️";
}
} }
div.language-ad-seealso .admonition-title::before { div.language-ad-seealso,
content: "🖊️"; div.callout-seealso {
.admonition-title::before {
content: "🖊️";
}
} }
div.language-ad-abstract .admonition-title::before { div.language-ad-abstract,
content: '📚' div.callout-abstract {
.admonition-title::before {
content: '📚'
}
} }
div.language-ad-summary .admonition-title::before { div.language-ad-summary,
content: '📚' div.callout-summary {
.admonition-title::before {
content: '📚'
}
} }
div.language-ad-tldr .admonition-title::before { div.language-ad-tldr,
content: '📚' div.callout-tldr {
.admonition-title::before {
content: '📚'
}
} }
div.language-ad-todo .admonition-title::before { div.language-ad-todo,
content: '☑️' div.callout-todo {
.admonition-title::before {
content: '☑️'
}
} }
div.language-ad-hint .admonition-title::before { div.language-ad-hint,
content: '🔥' div.callout-hint {
.admonition-title::before {
content: '🔥'
}
} }
div.language-ad-success .admonition-title::before { div.language-ad-success,
content: ✅ div.callout-success {
.admonition-title::before {
content: ✅
}
} }
div.language-ad-check .admonition-title::before { div.language-ad-check,
content: '✅' div.callout-check {
.admonition-title::before {
content: '✅'
}
} }
div.language-ad-done .admonition-title::before { div.language-ad-done,
content: '✅' div.callout-done {
.admonition-title::before {
content: '✅'
}
} }
div.language-ad-question .admonition-title::before { div.language-ad-question,
content: '❓' div.callout-question {
.admonition-title::before {
content: '❓'
}
} }
div.language-ad-help .admonition-title::before { div.language-ad-help,
content: '❓' div.callout-help {
.admonition-title::before {
content: '❓'
}
} }
div.language-ad-faq .admonition-title::before { div.language-ad-faq,
content: '❓' div.callout-faq {
.admonition-title::before {
content: '❓'
}
} }
div.language-ad-attention .admonition-title::before { div.language-ad-attention,
content: '⚠️' div.callout-attention {
.admonition-title::before {
content: '⚠️'
}
} }
div.language-ad-failure .admonition-title::before { div.language-ad-failure,
content: '❌' div.callout-failure {
.admonition-title::before {
content: '❌'
}
} }
div.language-ad-fail .admonition-title::before { div.language-ad-fail,
content: '❌' div.callout-fail {
.admonition-title::before {
content: '❌'
}
} }
div.language-ad-missing .admonition-title::before { div.language-ad-missing,
content: '❌' div.callout-missing {
.admonition-title::before {
content: '❌'
}
} }
div.language-ad-danger .admonition-title::before { div.language-ad-danger,
content: '⚡' div.callout-danger {
.admonition-title::before {
content: '⚡'
}
} }
div.language-ad-error .admonition-title::before { div.language-ad-error,
content: '⚡' div.callout-error {
.admonition-title::before {
content: '⚡'
}
} }
div.language-ad-bug .admonition-title::before { div.language-ad-bug,
content: '🐞' div.callout-bug {
.admonition-title::before {
content: '🐞'
}
} }
div.language-ad-quote .admonition-title::before { div.language-ad-quote,
content: '💬' div.callout-quote {
.admonition-title::before {
content: '💬'
}
} }
div.language-ad-cite .admonition-title::before { div.language-ad-cite,
content: '💬' div.callout-cite {
.admonition-title::before {
content: '💬'
}
} }
div.language-ad-note { div.language-ad-note,
div.callout-note {
background-color: rgba(68, 138, 255, .5) background-color: rgba(68, 138, 255, .5)
} }
div.language-ad-seealso { div.language-ad-seealso,
div.callout-seealso {
background-color: rgba(68, 138, 255, .5) background-color: rgba(68, 138, 255, .5)
} }
div.language-ad-abstract { div.language-ad-abstract,
div.callout-abstract {
background-color: rgba(0, 176, 255, .5) background-color: rgba(0, 176, 255, .5)
} }
div.language-ad-summary { div.language-ad-summary,
div.callout-summary {
background-color: rgba(0, 176, 255, .5) background-color: rgba(0, 176, 255, .5)
} }
div.language-ad-tldr { div.language-ad-tldr,
div.callout-tldr {
background-color: rgba(0, 176, 255, .5) background-color: rgba(0, 176, 255, .5)
} }
div.language-ad-info { div.language-ad-info,
div.callout-info {
background-color: rgba(0, 184, 212, .5) background-color: rgba(0, 184, 212, .5)
} }
div.language-ad-todo { div.language-ad-todo,
div.callout-todo {
background-color: rgba(0, 184, 212, .5) background-color: rgba(0, 184, 212, .5)
} }
div.language-ad-tip { div.language-ad-tip,
div.callout-tip {
background-color: rgba(0, 191, 165, .5) background-color: rgba(0, 191, 165, .5)
} }
div.language-ad-hint { div.language-ad-hint,
div.callout-hint {
background-color: rgba(0, 191, 165, .5) background-color: rgba(0, 191, 165, .5)
} }
div.language-ad-important { div.language-ad-important,
div.callout-important {
background-color: rgba(0, 191, 165, .5) background-color: rgba(0, 191, 165, .5)
} }
div.language-ad-success { div.language-ad-success,
div.callout-success {
background-color: rgba(0, 200, 83, .5) background-color: rgba(0, 200, 83, .5)
} }
div.language-ad-check { div.language-ad-check,
div.callout-check {
background-color: rgba(0, 200, 83, .5) background-color: rgba(0, 200, 83, .5)
} }
div.language-ad-done { div.language-ad-done,
div.callout-done {
background-color: rgba(0, 200, 83, .5) background-color: rgba(0, 200, 83, .5)
} }
div.language-ad-question { div.language-ad-question,
div.callout-question {
background-color: rgba(100, 221, 23, .5) background-color: rgba(100, 221, 23, .5)
} }
div.language-ad-help { div.language-ad-help,
div.callout-help {
background-color: rgba(100, 221, 23, .5) background-color: rgba(100, 221, 23, .5)
} }
div.language-ad-faq { div.language-ad-faq,
div.callout-faq {
background-color: rgba(100, 221, 23, .5) background-color: rgba(100, 221, 23, .5)
} }
div.language-ad-warning { div.language-ad-warning,
div.callout-warning {
background-color: rgba(255, 145, 0, .5) background-color: rgba(255, 145, 0, .5)
} }
div.language-ad-caution { div.language-ad-caution,
div.callout-caution {
background-color: rgba(255, 145, 0, .5) background-color: rgba(255, 145, 0, .5)
} }
div.language-ad-attention { div.language-ad-attention,
div.callout-attention {
background-color: rgba(255, 145, 0, .5) background-color: rgba(255, 145, 0, .5)
} }
div.language-ad-failure { div.language-ad-failure,
div.callout-failure {
background-color: rgba(255, 82, 82, .5) background-color: rgba(255, 82, 82, .5)
} }
div.language-ad-fail { div.language-ad-fail,
div.callout-fail {
background-color: rgba(255, 82, 82, .5) background-color: rgba(255, 82, 82, .5)
} }
div.language-ad-missing { div.language-ad-missing,
div.callout-missing {
background-color: rgba(255, 82, 82, .5) background-color: rgba(255, 82, 82, .5)
} }
div.language-ad-danger { div.language-ad-danger,
div.callout-danger {
background-color: rgba(255, 23, 68, .5) background-color: rgba(255, 23, 68, .5)
} }
div.language-ad-error { div.language-ad-error,
div.callout-error {
background-color: rgba(255, 23, 68, .5) background-color: rgba(255, 23, 68, .5)
} }
div.language-ad-bug { div.language-ad-bug,
div.callout-bug {
background-color: rgba(245, 0, 87, .5) background-color: rgba(245, 0, 87, .5)
} }
div.language-ad-example { div.language-ad-example,
div.callout-example {
background-color: rgba(124, 77, 255, .5) background-color: rgba(124, 77, 255, .5)
} }
div.language-ad-quote { div.language-ad-quote,
div.callout-quote {
background-color: rgba(158, 158, 158, .5) background-color: rgba(158, 158, 158, .5)
} }
div.language-ad-cite { div.language-ad-cite,
div.callout-cite {
background-color: rgba(158, 158, 158, .5) background-color: rgba(158, 158, 158, .5)
} }