Add support for callouts from obsidian and enable table of contents for posts

[rooobeert]

Hi,

Im currently trying out pagecord. So far im very happy with. Its also my first time using Obsidian as an editing tool, coming from Notion. I have a technical blog about Microsoft 365 and I use the following tools quite a lot:

• Callouts
  Right now, callouts are transformed into quotes. BUT the quotes still have the !note or !tip in the text without being formatted properly. For me this would be a nice addition.

• Table of contents
  The documentations says that the dynamic variable for table of contents are only allowed in pages. As my posts sometimes get quite long, I need to give a user that table of contents. So far I always had it hovering on the side, but on top (non sticky) would also be alright. I could image simply adding the variable to my obisidan page, from there pagecord picks it up and transforms it into a uptodate table of contents.

Maybe somebody else is also interested in these ideas!
Thanks!

[lylo]

Thanks for the feedback! Callouts is a good idea – I'll look into that. Should be straightforward.

Table of contents in posts is trickier, I'll need to think more about that (complexity around RSS, email newsletters and so on). You can always manually create it for now, which I appreciate is a faff but might work in the interim. Pagecord automatically adds anchor IDs to every heading in your posts.

[rooobeert]

I could imagine the table of contents being like a small overlay button that just hovers above the content. Then it might not interfere with the content itself. Something like in the picture. Once you click or hover over it the table of content appears.

[lylo]

I could imagine the table of contents being like a small overlay button that just hovers above the content. Then it might not interfere with the content itself. Something like in the picture. Once you click or hover over it the table of content appears.

If I add native support for this it would work exactly like it does with pages. However, if you wanted a custom floating thing then you could do this with the forthcoming custom code feature - use Javascript to insert a ToC at runtime. Here's an example I just did as a test:

The code for this was:

<script>
    document.addEventListener("turbo:load", function () {
      document.querySelector(".toc")?.remove()
      if (document.body.dataset.pageType !== "post") return

      const headings = document.querySelectorAll(".post-body h2, .post-body h3")
      if (headings.length < 3) return

      const toc = document.createElement("details")
      toc.className = "toc"
      toc.open = true
      toc.innerHTML = "<summary>Contents</summary>"

      const list = document.createElement("ol")
      headings.forEach(function (heading, index) {
        if (!heading.id) heading.id = "section-" + (index + 1)

        const item = document.createElement("li")
        item.className = "toc-" + heading.tagName.toLowerCase()

        const link = document.createElement("a")
        link.href = "#" + heading.id
        link.textContent = heading.textContent.trim()

        item.append(link)
        list.append(item)
      })

      toc.append(list)
      headings[0].before(toc)
    })
  </script>

[rooobeert]

Native would work fine for me tbh. Would I just add {{table of contents}} to my obisidan note and it gets populated once I open the site?

JavaScript also sounds nice, as this also brings the ability to add a cookie banner.

[lylo]

Just to note I've created #1155 for tracking the callout work