Today I started autolinking the text in comments on my website, and made a couple other minor improvements to how they look.
Previously, links, @-names and hashtags were rendered as plaintext, so comments weren't clickable.
With the new autolinking in place, these now look like the below:
I had to make a backend change to p3k to support autolinking properly. It turns out I hadn't been storing whether the original comment text was HTML or plaintext, and autolinking HTML is very hard I was running into all sorts of edge cases when I was trying to use the autolinker on HTML input. So now I store whether the comment text came in as HTML or plaintext, and only run the autolinker on plaintext comments. This does mean there are some comments where @-mentions or hashtags aren't linked, because the author did not link them up. I've decided it's going to be a separate project to work on autolinking text in HTML.
If comments were written as HTML, I now also display that HTML! Of course the HTML is thoroughly sanitized with HTML Purifier, which is done in XRay. XRay allows a small subset of HTML tags, and removes all attributes except for Microformats 2 values in class attributes. I do display images in comments now which is fun too!
The other improvement I made is if a blog post mentions a post, then I only show the name of the post and don't show any content. This cleaned up the list of mentions a lot, since before I was showing a (poorly) truncated version of the content as well.
Next I'll have to work on autolinking and truncating text in HTML comments, which it turns out is super tricky! I think the correct thing to do is to parse the HTML tree, and run the plaintext autolinker on the text value of each node, except for text inside specific elements such as <a>, <button>, etc.
