# Getting comments on my Obsidian Publish site #### An adventure of a lifetime ## Update 2022: [caint.casa](https://www.caint.casa/) is shutting down. I will eventually find a replacement. For now, this guide will stay up as a reference. ## Original Post Comments. They're a quintessential part of the blogging experience, or so I'm told by [people who have been doing this much longer than I have](https://blog.codinghorror.com/a-blog-without-comments-is-not-a-blog/). Unfortunately, [Obsidian Publish](https://obsidian.md/publish) (which is what's hosting this site right now!) doesn't yet have support for comments (and I'm not sure they ever will). As such, in order to have my little blog here be a _real_ blog, I had to find some third party solutions. Easy enough, right? _Spoiler alert: It was not easy_ ### Let there be utteranc.es Prior to making this website, I had written a personal site using [Jekyll](https://jekyllrb.com) and [Github Pages](https://pages.github.com), wherein I had encountered the same problem I was currently trying to solve; how the heck do I get comments onto my website? At the time, someone in a community I frequented had posted about a little tool known as [utterances](https://utteranc.es), and I was immediately enthralled. In a nutshell, utterances supports comments by creating issues in a linked Github repository, allowing your visitors to authenticate with Github and "comment" by replying to the generated issue, all from your site. This worked great on my old site, where I had free reign on the page source and simply had to drop a script in the HTML of my site; unfortunately, Obsidian is a little bit different. Due to the Obsidian devs (reasonable) concerns about security, all HTML in notes served are first [sanitized](https://help.obsidian.md/Advanced+topics/HTML+sanitization), meaning any kind of arbitrary script execution (like the one needed to run the utterances plugin) would have to be added in after the page loads through Javascript. Ok, first roadblock; how the heck do we do that? ### Javascript, Javascript, Javascript To preface this, I have not written a lot of Javascript. Outside a few odd jobs here and there, my experience with vanilla JS is about as deep as a frying pan. In short, please don't judge my code too badly 😅 The first step to getting utteranc.es to show up on my site was to figure out _where_ to put it. A simple inspect element revealed the appropriate HTML tag to search for with my code (thanks Obsidian devs for making this very straightforward ❤️), and we can write a little function to insert the right HTML divs utteranc.es expects to work like so: ```javascript function addComments() { // Build the script tag to insert to the main body text var commentsScript = document.createElement('script'); commentsScript.type = 'text/javascript'; commentsScript.src = 'https://utteranc.es/client.js'; commentsScript.setAttribute('repo', "reponame") commentsScript.setAttribute('issue-term', 'title') commentsScript.setAttribute('theme', 'gruvbox-dark') commentsScript.setAttribute('crossorigin', 'anonymous') commentsScript.setAttribute("async", ""); document.getElementsByClassName('markdown-preview-view')[0].appendChild(commentsScript); } ``` Alright, awesome, let's test it out on our site, and- ![[images/utterance1.png]] _Oops_. Looks like we need to be a little more clever here; we don't want to include comments on _every_ page. Luckily, Obsidian keeps the [frontmatter](https://help.obsidian.md/Advanced+topics/YAML+front+matter) when publishing notes, so let's just check if there's a comments flag in there: ```javascript function addComments() { var yamlContainer = document.querySelector('.frontmatter.language-yaml'); var textContent = yamlContainer.textContent; if (textContent.includes('comments: true')) {...} ``` Awesome! Now we can control which page loads comments. Let's test it out! ### Redirecting my hopes and dreams (to the bin) Unfortunately, the story for utteranc.es on Obsidian ends at this point. Utteranc.es works by sending your potential commentor to Github to log into their account, then redirects them back to your website with a parameter in the URL for utteranc.es to take and verify their session. Currently, however, Obsidian does not allow for these parameters to be accessed, and instead gives them to [the magical man from happy land](https://www.youtube.com/watch?v=-sbFhOeqTzY). What this means is no matter what I do, without some complex fancy Javascript hackery, allowing users to actually comment with utteranc.es and not just be eternally prompted to log in would be impossible. ![[sadness.png]] Heartbroken, I shelved the project and went on with my life; a commentless, broken shell of a blog looming over my head. ### Caint to the rescue Just this week, I decided to discuss my experiences on the Obsidian discord, where others had encountered the same issues I had getting comments to work properly on their blogs. Of note was a particular poster, who shared a [link to a website discussing many comment solutions](https://darekkay.com/blog/static-site-comments/?fbclid=IwAR300tKTva7QZJu5F21Kzp8Hcc-aQz7zVhOi2XO7Dv9SZ0PtpUcpF5E4DWA) for personal websites, from Disqus to the aforementioned utteranc.es. Scrolling through this vast array of potential solutions, I stumbled upon the innocuous [caint.casa](https://www.caint.casa). Thoughts rushed through my head as I read the short intro to the website; _could this be my solution?_ Cut to today, where I decided to try and get this little system working with Obsidian. After discovering Obsidian allows for insertion of HTML tags that are treated as such in the body of notes, I went about adapting caint to work with the oddities of Obsidian using what I had gleaned from my (abridged) utteranc.es adventure. To make a long story short; **it was a success**. ### How you too can get comments I'm assuming that if you've made it this far, you've either skipped straight to how you too can get comments on your Obsidian site, or you're wanting to know the thrilling conclusion to this whole ordeal. A few pre-requisites are in order: - You must be using a custom domain for your Obsidian Site; [as pointed out here](https://help.obsidian.md/Licenses+%26+add-on+services/Obsidian+Publish#Custom+JS), you need this to enable running Javascript on your publish site. - You need to make a [caint.casa](https://dashboard.caint.casa) account, and follow the set up steps. Once this is done, insert the following HTML tags into the notes you want to have comments: ```HTML <p id="counter"></p> <div id="commentThread"> </div> <h3>Comment</h3> <form id="formField"> <input type="hidden" id="threadID"> <input type="text" id="commenterName" placeholder="name"><br><br> <textarea id="commentBody" placeholder="Write here..."></textarea><br><br> <input type="submit" value="Add"> </form> </div> ``` This allows the Javascript taken from caint to find the correct HTML elements to adapt. Once this is in place, simply add the content of [my publish.js file](https://github.com/polyrain/obsidian/blob/main/publish.js) (thanks [Jack Gleeson (caint creator) for providing a lot of this!](https://www.jpgleeson.com)) to your publish.js file, hit publish, and you're off! You'll need to style it as appropriate for your site still; caint provides a [good starting point for this for your reference.](https://git.sr.ht/~jpgleeson/caint-redist/tree) ![[confetti.png]] ### Wrapping up Well, that's it! An abridged rundown of how you can get comments on your Obsidian blog, paid for in my pain over the last few weeks. I hope this has been useful to someone out there; if so, let me know in the comments ;) _ Go back to [[blogs]] _ --- <div class="center"> <p id="counter"></p> <div id="commentThread"> </div> </div> --- <div class="center"> <h3>Comment</h3> <form id="formField"> <input type="hidden" id="threadID"> <input type="text" id="commenterName" placeholder="name"><br><br> <textarea id="commentBody" placeholder="Write here..."></textarea><br><br> <input type="submit" value="Add"> </form> </div> </div> --- **Tagged with:: #technology, #obsidian**