mirror of
https://github.com/tcsenpai/obsidiangarden_netlify.git
synced 2025-06-06 04:35:20 +00:00
Added support for callout blocks
This commit is contained in:
Ole Eskild Steensen
parent
bdc7f195e4
commit
0a11495310
99
.eleventy.js
99
.eleventy.js
@ -12,10 +12,12 @@ module.exports = function(eleventyConfig) {
|
||||
.use(require("markdown-it-footnote"))
|
||||
.use(require('markdown-it-mathjax3'), {
|
||||
tex: {
|
||||
inlineMath: [["$", "$"]]
|
||||
inlineMath: [
|
||||
["$", "$"]
|
||||
]
|
||||
},
|
||||
options: {
|
||||
skipHtmlTags: {'[-]': ['pre']}
|
||||
skipHtmlTags: { '[-]': ['pre'] }
|
||||
}
|
||||
})
|
||||
.use(require('markdown-it-task-checkbox'), {
|
||||
@ -102,6 +104,7 @@ module.exports = function(eleventyConfig) {
|
||||
|
||||
return defaultLinkRule(tokens, idx, options, env, self);
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
eleventyConfig.setLibrary("md", markdownLib);
|
||||
@ -117,14 +120,14 @@ module.exports = function(eleventyConfig) {
|
||||
let fileName = fileLink;
|
||||
let header = "";
|
||||
let headerLinkPath = "";
|
||||
if(fileLink.includes("#")){
|
||||
if (fileLink.includes("#")) {
|
||||
[fileName, header] = fileLink.split("#");
|
||||
headerLinkPath = `#${headerToId(header)}`;
|
||||
}
|
||||
}
|
||||
|
||||
let permalink = `/notes/${slugify(fileName)}`;
|
||||
const title = linkTitle ? linkTitle : fileName;
|
||||
|
||||
|
||||
|
||||
try {
|
||||
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.addPlugin(faviconPlugin, { destination: 'dist' });
|
||||
|
||||
@ -163,46 +186,46 @@ module.exports = function(eleventyConfig) {
|
||||
|
||||
};
|
||||
|
||||
function headerToId(heading){
|
||||
function headerToId(heading) {
|
||||
return slugify(heading);
|
||||
}
|
||||
|
||||
//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));
|
||||
}
|
||||
|
||||
function namedHeadings (md, state) {
|
||||
function namedHeadings(md, state) {
|
||||
|
||||
var ids = {}
|
||||
var ids = {}
|
||||
|
||||
state.tokens.forEach(function (token, i) {
|
||||
if (token.type === 'heading_open') {
|
||||
var text = md.renderer.render(state.tokens[i + 1].children, md.options)
|
||||
var id = headerToId(text);
|
||||
var uniqId = uncollide(ids, id)
|
||||
ids[uniqId] = true
|
||||
setAttr(token, 'id', uniqId)
|
||||
state.tokens.forEach(function(token, i) {
|
||||
if (token.type === 'heading_open') {
|
||||
var text = md.renderer.render(state.tokens[i + 1].children, md.options)
|
||||
var id = headerToId(text);
|
||||
var uniqId = uncollide(ids, id)
|
||||
ids[uniqId] = true
|
||||
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
101
src/site/notes/Set up your own digital garden.md
Normal file
File diff suppressed because one or more lines are too long
50
src/site/notes/home.md
Normal file
50
src/site/notes/home.md
Normal file
File diff suppressed because one or more lines are too long
@ -23,6 +23,7 @@
|
||||
.markdown-preview-view pre.mermaid {
|
||||
background: white;
|
||||
border-radius: 25px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
div.translusion {
|
||||
@ -34,7 +35,8 @@ div.translusion {
|
||||
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;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 10px;
|
||||
@ -58,7 +60,8 @@ ul.task-list {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
div[class*="language-ad-"] {
|
||||
div[class*="language-ad-"],
|
||||
div[class*="callout-"] {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
word-wrap: break-word;
|
||||
border-radius: 6px;
|
||||
@ -73,226 +76,338 @@ div[class*="language-ad-"] {
|
||||
white-space: normal !important;
|
||||
}
|
||||
|
||||
div.language-ad-note .admonition-title::before {
|
||||
content: "🖊️";
|
||||
div.language-ad-note,
|
||||
div.callout-note {
|
||||
.admonition-title::before {
|
||||
content: "🖊️";
|
||||
}
|
||||
}
|
||||
|
||||
div.language-ad-tip .admonition-title::before {
|
||||
content: "💡";
|
||||
div.language-ad-tip,
|
||||
div.callout-tip {
|
||||
.admonition-title::before {
|
||||
content: "💡";
|
||||
}
|
||||
}
|
||||
|
||||
div.language-ad-warning .admonition-title::before {
|
||||
content: "⚠️";
|
||||
div.language-ad-warning,
|
||||
div.callout-warning {
|
||||
.admonition-title::before {
|
||||
content: "⚠️";
|
||||
}
|
||||
}
|
||||
|
||||
div.language-ad-important .admonition-title::before {
|
||||
content: "❗️";
|
||||
div.language-ad-important,
|
||||
div.callout-important {
|
||||
.admonition-title::before {
|
||||
content: "❗️";
|
||||
}
|
||||
}
|
||||
|
||||
div.language-ad-caution .admonition-title::before {
|
||||
content: "⚠️";
|
||||
div.language-ad-caution,
|
||||
div.callout-caution {
|
||||
.admonition-title::before {
|
||||
content: "⚠️";
|
||||
}
|
||||
}
|
||||
|
||||
div.language-ad-info .admonition-title::before {
|
||||
content: "ℹ";
|
||||
div.language-ad-info,
|
||||
div.callout-info {
|
||||
.admonition-title::before {
|
||||
content: "ℹ";
|
||||
}
|
||||
}
|
||||
|
||||
div.language-ad-example .admonition-title::before {
|
||||
content: "🗒️";
|
||||
div.language-ad-example,
|
||||
div.callout-example {
|
||||
.admonition-title::before {
|
||||
content: "🗒️";
|
||||
}
|
||||
}
|
||||
|
||||
div.language-ad-seealso .admonition-title::before {
|
||||
content: "🖊️";
|
||||
div.language-ad-seealso,
|
||||
div.callout-seealso {
|
||||
.admonition-title::before {
|
||||
content: "🖊️";
|
||||
}
|
||||
}
|
||||
|
||||
div.language-ad-abstract .admonition-title::before {
|
||||
content: '📚'
|
||||
div.language-ad-abstract,
|
||||
div.callout-abstract {
|
||||
.admonition-title::before {
|
||||
content: '📚'
|
||||
}
|
||||
}
|
||||
|
||||
div.language-ad-summary .admonition-title::before {
|
||||
content: '📚'
|
||||
div.language-ad-summary,
|
||||
div.callout-summary {
|
||||
.admonition-title::before {
|
||||
content: '📚'
|
||||
}
|
||||
}
|
||||
|
||||
div.language-ad-tldr .admonition-title::before {
|
||||
content: '📚'
|
||||
div.language-ad-tldr,
|
||||
div.callout-tldr {
|
||||
.admonition-title::before {
|
||||
content: '📚'
|
||||
}
|
||||
}
|
||||
|
||||
div.language-ad-todo .admonition-title::before {
|
||||
content: '☑️'
|
||||
div.language-ad-todo,
|
||||
div.callout-todo {
|
||||
.admonition-title::before {
|
||||
content: '☑️'
|
||||
}
|
||||
}
|
||||
|
||||
div.language-ad-hint .admonition-title::before {
|
||||
content: '🔥'
|
||||
div.language-ad-hint,
|
||||
div.callout-hint {
|
||||
.admonition-title::before {
|
||||
content: '🔥'
|
||||
}
|
||||
}
|
||||
|
||||
div.language-ad-success .admonition-title::before {
|
||||
content: ✅
|
||||
div.language-ad-success,
|
||||
div.callout-success {
|
||||
.admonition-title::before {
|
||||
content: ✅
|
||||
}
|
||||
}
|
||||
|
||||
div.language-ad-check .admonition-title::before {
|
||||
content: '✅'
|
||||
div.language-ad-check,
|
||||
div.callout-check {
|
||||
.admonition-title::before {
|
||||
content: '✅'
|
||||
}
|
||||
}
|
||||
|
||||
div.language-ad-done .admonition-title::before {
|
||||
content: '✅'
|
||||
div.language-ad-done,
|
||||
div.callout-done {
|
||||
.admonition-title::before {
|
||||
content: '✅'
|
||||
}
|
||||
}
|
||||
|
||||
div.language-ad-question .admonition-title::before {
|
||||
content: '❓'
|
||||
div.language-ad-question,
|
||||
div.callout-question {
|
||||
.admonition-title::before {
|
||||
content: '❓'
|
||||
}
|
||||
}
|
||||
|
||||
div.language-ad-help .admonition-title::before {
|
||||
content: '❓'
|
||||
div.language-ad-help,
|
||||
div.callout-help {
|
||||
.admonition-title::before {
|
||||
content: '❓'
|
||||
}
|
||||
}
|
||||
|
||||
div.language-ad-faq .admonition-title::before {
|
||||
content: '❓'
|
||||
div.language-ad-faq,
|
||||
div.callout-faq {
|
||||
.admonition-title::before {
|
||||
content: '❓'
|
||||
}
|
||||
}
|
||||
|
||||
div.language-ad-attention .admonition-title::before {
|
||||
content: '⚠️'
|
||||
div.language-ad-attention,
|
||||
div.callout-attention {
|
||||
.admonition-title::before {
|
||||
content: '⚠️'
|
||||
}
|
||||
}
|
||||
|
||||
div.language-ad-failure .admonition-title::before {
|
||||
content: '❌'
|
||||
div.language-ad-failure,
|
||||
div.callout-failure {
|
||||
.admonition-title::before {
|
||||
content: '❌'
|
||||
}
|
||||
}
|
||||
|
||||
div.language-ad-fail .admonition-title::before {
|
||||
content: '❌'
|
||||
div.language-ad-fail,
|
||||
div.callout-fail {
|
||||
.admonition-title::before {
|
||||
content: '❌'
|
||||
}
|
||||
}
|
||||
|
||||
div.language-ad-missing .admonition-title::before {
|
||||
content: '❌'
|
||||
div.language-ad-missing,
|
||||
div.callout-missing {
|
||||
.admonition-title::before {
|
||||
content: '❌'
|
||||
}
|
||||
}
|
||||
|
||||
div.language-ad-danger .admonition-title::before {
|
||||
content: '⚡'
|
||||
div.language-ad-danger,
|
||||
div.callout-danger {
|
||||
.admonition-title::before {
|
||||
content: '⚡'
|
||||
}
|
||||
}
|
||||
|
||||
div.language-ad-error .admonition-title::before {
|
||||
content: '⚡'
|
||||
div.language-ad-error,
|
||||
div.callout-error {
|
||||
.admonition-title::before {
|
||||
content: '⚡'
|
||||
}
|
||||
}
|
||||
|
||||
div.language-ad-bug .admonition-title::before {
|
||||
content: '🐞'
|
||||
div.language-ad-bug,
|
||||
div.callout-bug {
|
||||
.admonition-title::before {
|
||||
content: '🐞'
|
||||
}
|
||||
}
|
||||
|
||||
div.language-ad-quote .admonition-title::before {
|
||||
content: '💬'
|
||||
div.language-ad-quote,
|
||||
div.callout-quote {
|
||||
.admonition-title::before {
|
||||
content: '💬'
|
||||
}
|
||||
}
|
||||
|
||||
div.language-ad-cite .admonition-title::before {
|
||||
content: '💬'
|
||||
div.language-ad-cite,
|
||||
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)
|
||||
}
|
||||
|
||||
div.language-ad-seealso {
|
||||
div.language-ad-seealso,
|
||||
div.callout-seealso {
|
||||
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)
|
||||
}
|
||||
|
||||
div.language-ad-summary {
|
||||
div.language-ad-summary,
|
||||
div.callout-summary {
|
||||
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)
|
||||
}
|
||||
|
||||
div.language-ad-info {
|
||||
div.language-ad-info,
|
||||
div.callout-info {
|
||||
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)
|
||||
}
|
||||
|
||||
div.language-ad-tip {
|
||||
div.language-ad-tip,
|
||||
div.callout-tip {
|
||||
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)
|
||||
}
|
||||
|
||||
div.language-ad-important {
|
||||
div.language-ad-important,
|
||||
div.callout-important {
|
||||
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)
|
||||
}
|
||||
|
||||
div.language-ad-check {
|
||||
div.language-ad-check,
|
||||
div.callout-check {
|
||||
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)
|
||||
}
|
||||
|
||||
div.language-ad-question {
|
||||
div.language-ad-question,
|
||||
div.callout-question {
|
||||
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)
|
||||
}
|
||||
|
||||
div.language-ad-faq {
|
||||
div.language-ad-faq,
|
||||
div.callout-faq {
|
||||
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)
|
||||
}
|
||||
|
||||
div.language-ad-caution {
|
||||
div.language-ad-caution,
|
||||
div.callout-caution {
|
||||
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)
|
||||
}
|
||||
|
||||
div.language-ad-failure {
|
||||
div.language-ad-failure,
|
||||
div.callout-failure {
|
||||
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)
|
||||
}
|
||||
|
||||
div.language-ad-missing {
|
||||
div.language-ad-missing,
|
||||
div.callout-missing {
|
||||
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)
|
||||
}
|
||||
|
||||
div.language-ad-error {
|
||||
div.language-ad-error,
|
||||
div.callout-error {
|
||||
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)
|
||||
}
|
||||
|
||||
div.language-ad-example {
|
||||
div.language-ad-example,
|
||||
div.callout-example {
|
||||
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)
|
||||
}
|
||||
|
||||
div.language-ad-cite {
|
||||
div.language-ad-cite,
|
||||
div.callout-cite {
|
||||
background-color: rgba(158, 158, 158, .5)
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user