Callouts support

[olayway]

We would follow Obsidian style as listed on here https://help.obsidian.md/How+to/Use+callouts

> [!INFO]
> Here's a callout block.
> It supports **markdown** and [[Internal link|wikilinks]].

Acceptance

repo: https://github.com/flowershow/remark-callouts npm: https://www.npmjs.com/package/remark-callouts

• [x] Support blockquote obsidian style callouts
• [x] Support 13 type with appropriate styling in default theme
• [x] Supports nested blockquote callouts
• [x] Supports aliases for types
• [x] Defaults to note style callout for all other types eg. > [!xyz]
• [x] Supports dark and light mode styles

Screenshots

• with callout

  

• without callout

  

Tasks

• [x] Do analysis and estimate e.g. do we do a new remark plugin? (we could put in our existing plugin?) ✅ 2022-09-14 create new remark plugin @ repo: https://github.com/flowershow/remark-callouts
• [x] Add following features in plugin ✅ 2022-09-23
  • [x] All admonitions that exist in obsidian including their aliases
  • [x] Add custom titles (also support markdown)
  • [x] Add nested callouts similar style in obsidian
  • [x] Colors and Icons same as in obsidian
  • [x] Add dark and light mode styles
• [x] Fix headings added due to rehype-auto-link-headings ✅ 2022-09-26
  • added classNames (blockquote-heading) so above package can emit

Notes

• custom titles in callout headers can support markdown (as in obsidian) but not [[wiki-links]] (yet).

[rufuspollock]

things i've found from a quick google:

• First, naming for this: callouts / admonitions / containers
• Discussion re implementing on github https://github.com/community/community/discussions/16925
• https://github.com/Nevenall/remark-containers - a bit similar in functionality though using ::: for fencing blocks
• https://github.com/elviswolcott/remark-admonitions - is similar (and used by docosaurus)

[khalilcodes]

@rufuspollock

https://github.com/Nevenall/remark-containers - a bit similar in functionality though using ::: for fencing blocks

This was the closest one I had found.

I'd consider creating a new flowershow/remark-callouts repo and modifying above or https://github.com/elviswolcott/remark-admonitions as per our needs similar to what we did in remark-wiki-links-plus

[rufuspollock]

@khalilcodes ok - have you examined the code - what parts would be useful exactly?

[khalilcodes]

@rufuspollock

Browsing through remark-containers and even modifying it a bit, I could see the tokenizer handles the ":::" (or ">" in our case) found on new lines by splitting them and then transforming the nodes. Also, remark-admonitions has a similar approach including an object with a list of types (ie., note, tip, warning, etc) with their relevant properties (class, svg, etc).

The approach here I'm thinking is to see how extensively can we modify their existing code to suit our needs ?

[rufuspollock]

@khalilcodes sounds good. are you asking me a question at the end or a question to yourself?

[khalilcodes]

@rufuspollock 😄 Just validating if the approach is right.

[khalilcodes]

@olayway @rufuspollock

Current progress on callouts remark plugin ...

• [x] supports all admonitions that exist in obsidian including aliases
• [x] supports nested callouts
• [x] colors and icons same as obsidian

Some issues and enhancements to be addressed.

• [x] headings in blockquotes are being generated with links due to auto-link-headings ✅ Fixed 2022-09-26
• [x] nested blockquotes border styling (very minor) ✅ Done 2022-09-26

[rufuspollock]

@khalilcodes imo headings in blockquotes being linked is not the end of the world (though imperfect - we can live for now and revisit - e.g. open an issue to remind ourselves of this and close this one).

[khalilcodes]

@rufuspollock the headings was resolved on Monday and the npm package has been published and ready to go.

repo: https://github.com/flowershow/remark-callouts npm: https://www.npmjs.com/package/remark-callouts

One minor limitation is that wiki links do not parse in the callout's header section (works in body), although other markdown stuff does just as in Obsidian. For eg ..

> [!tip] # custom title // this works (parses the title as h1)

> [!tip] [[wiki-link]] // this doesn't -->  shows Tip instead

> [!tip]
> [[wiki-link]] // this works

I will update the tasks shortly.

[rufuspollock]

@khalilcodes amazing! 👏 👏 let's integrate it and deploy it!