diff --git a/.eleventy.js b/.eleventy.js index 2a5c87a..8d27742 100644 --- a/.eleventy.js +++ b/.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(/
((.|\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("
", "") ? + `${title}` : + `${callout.charAt(0).toUpperCase()}${callout.substring(1).toLowerCase()}`; + return ""; + }); + + return `+ ${titleDiv} + ${content} +`; + }); + }); + 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 - } -} +} \ No newline at end of file diff --git a/src/site/notes/Set up your own digital garden.md b/src/site/notes/Set up your own digital garden.md new file mode 100644 index 0000000..b0a636d --- /dev/null +++ b/src/site/notes/Set up your own digital garden.md @@ -0,0 +1,101 @@ +# Set up your digital garden + +# Obsidian Digital Garden +Publish your notes in your own personal digital garden, using [Obsidian](https://obsidian.md/) as the editor and publishing platform. + +## Configuration +It's a bit of work to set this all up, but when you're done you'll have a digital garden in which you are in control of every part of it, and can customize it as you see fit. Which is what makes digital gardens so delightful. +Lets get started: + +1. First off, install the [Digital Garden Obsidian Plugin](https://github.com/oleeskild/Obsidian-Digital-Garden) +1. Next, you will need a GitHub account. If you don't have this, create one [here](https://github.com/signup). +2. You'll also need a Netlify account. You can sign up using your GitHub account [here](https://app.netlify.com/) +3. Open [this repo](https://github.com/oleeskild/digitalgarden), and click the green "Deploy to netlify" button. This will open netlify which in turn will create a copy of this repository in your GitHub accont. Give it a fitting name like 'my-digital-garden'. Follow the steps to publish your site to the internet. +4. Now you need to create an access token so that the plugin can add new notes to the repo on your behalf. Go to [this page](https://github.com/settings/tokens/new?scopes=repo) while logged in to GitHub. The correct settings should already be applied. If you don't want to generate this every few months, choose the "No expiration" option. Click the "Generate token" button, and copy the token you are presented with on the next page. +5. Open Obsidian and the settings for "Digital Garden" and fill in your github username, the name of the repo with your notes which you created in step 3, and lastly paste in your token. +7. Now, let's publish your first note! Create a new note in Obsidian. And add this to the top of your file + +``` +--- +dg-pagetype: home +--- +``` + +This tells the plugin that this should be your home page or entry into your digital garden. + +8. Open your command pallete by pressing CTRL+P on Windows/Linux (CMD+P on Mac) and find the "Digital Garden: Publish Note" command. Press enter. + +9. Go to your site's URL which you should find on [Netlify](https://app.netlify.com). If nothing shows up yet, wait a minute and refresh. Your note should now appear. + +Congratulations, you now have your own digital garden, hosted free of charge. + +The code for the website is available in the repo you created in step 3, and this is yours to modify however you want. If you know some css you can change the styling on your page by modifying the styles.css file. Netlify will automatically update your site when you make changes to the code. + +## Content support +The plugin currently supports rendering these types of note contents: +### Basic Markdown Syntax +**Bold text** follwed by *italic text* +### Code Blocks +```javascript +let a = 5; +``` +### Links to other document +Link to other notes with double brackets like you normally would in obsidian. +[[Another note]] + +### Admonitions + +```ad-note + Information +``` + +```ad-warning + This is a warning +``` + +### MathJax + +$$\frac{1}{0} = \infty$$ + +### Embedded/Transcluded Images + + + +### Transcluded documents + + +```transclusion +# Transcluded Text Example + +This is text from another document with a transcluded image inside. + + +``` + + +### Mermaid diagrams +```mermaid + graph LR; + A-->B +``` + +```mermaid + gantt + title A Gantt Diagram + dateFormat YYYY-MM-DD + section Section + A task :a1, 2014-01-01, 30d + Another task :after a1 , 20d + section Another + Task in sec :2014-01-12 , 12d + another task : 24d +``` + +## Not yet supported +### Excalidraw + +--- + +```ad-info +If you are interested in how the markdown file behind this page looks, you can take a look at it [here](https://github.com/oleeskild/notathage/blob/main/src/site/notes/Set%20up%20your%20own%20digital%20garden.md?plain=1) +``` diff --git a/src/site/notes/home.md b/src/site/notes/home.md new file mode 100644 index 0000000..648f32e --- /dev/null +++ b/src/site/notes/home.md @@ -0,0 +1,50 @@ +--- +tags: gardenEntry +--- +# h1 +[[Set up your own digital garden|lol]] +[[Set up your own digital garden\|testolini]] +```ad-note +Test +``` + +```bash +[[ -f "${yamlFile}" ]] && echo 'do something' +``` + +$x^2$ + +$$ \frac{5}{2} $$ + +```js +let lol = 1; +``` + +```ad-cite +title: Hello +Things is happenineg here +``` + +> [!error] tittelen min!! +> `let a = 5;` code +> Contents ting skjer +> Så skjer ting her +> osv osv +> noen a +> + +```mermaid +graph TD; +A-->B +A-->C +``` + +Her is a footnote reference [^1] + +==highlighted text== + +[^1]: This is the footnote + Indented paragraph + `{code: "lol"}` + + diff --git a/src/site/styles/digital-garden-base.scss b/src/site/styles/digital-garden-base.scss index bff038c..ffac4e7 100644 --- a/src/site/styles/digital-garden-base.scss +++ b/src/site/styles/digital-garden-base.scss @@ -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) } \ No newline at end of file