65°F

Aaron Parecki

  • Articles
  • Notes
  • Photos
  • Day 16: Improved Comments Display for p3k #100DaysOfIndieWeb

    January 5, 2017

    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.

    Portland, Oregon
    Thu, Jan 5, 2017 12:57pm -08:00 #p3k #indieweb #100daysofindieweb #100daysofcode
    2 replies 3 mentions
    • Kevin Marks known.kevinmarks.com/profile/kevinmarks
      Aaron is autolinking #indieweb comments now, including hashtags, which is giving me #technorati flashbacks
      Thu, Jan 5, 2017 9:25pm +00:00
    • Ryan Barrett snarfed.org

      cool!!! auto linking and images in comments are underrated.

      it’s definitely not perfect, but feel free to plunder my code for auto-linking HTML, based on kylewm’s: https://github.com/snarfed/webutil/blob/9770108bc133700e2be690ed9475f96e6ba13331/util.py#L391-L489

      also, did you only switch articles to name? or notes too? the wordpress plugins originally only showed name for both, which annoyed me, so i made both show full content if it was short enough: https://github.com/pfefferle/wordpress-semantic-linkbacks/pull/64

      Thu, Jan 5, 2017 1:23pm -08:00

    Other Mentions

    • Aaron Parecki aaronparecki.com
      My 2017 Year in Review
      Thu, Jan 4, 2018 2:40pm -08:00
    • Aaron Parecki aaronparecki.com
      Week in Review #100DaysOfIndieWeb
      Fri, Jan 6, 2017 11:39am -08:00
    • 100 Days of IndieWeb aaronparecki.com/tag/100daysofindieweb
      Day 16: Improved Comments Display for p3k #100DaysOfIndieWeb: aaronparecki.com/2017/01/05/6/d…
      Thu, Jan 5, 2017 8:59pm +00:00 (via brid-gy.appspot.com)
Posted in /articles using quill.p3k.io

Hi, I'm Aaron Parecki, Director of Identity Standards at Okta, and co-founder of IndieWebCamp. I maintain oauth.net, write and consult about OAuth, and participate in the OAuth Working Group at the IETF. I also help people learn about video production and livestreaming. (detailed bio)

I've been tracking my location since 2008 and I wrote 100 songs in 100 days. I've spoken at conferences around the world about owning your data, OAuth, quantified self, and explained why R is a vowel. Read more.

  • Director of Identity Standards at Okta
  • IndieWebCamp Founder
  • OAuth WG Editor
  • OpenID Board Member

  • 🎥 YouTube Tutorials and Reviews
  • 🏠 We're building a triplex!
  • ⭐️ Life Stack
  • ⚙️ Home Automation
  • All
  • Articles
  • Bookmarks
  • Notes
  • Photos
  • Replies
  • Reviews
  • Trips
  • Videos
  • Contact
© 1999-2025 by Aaron Parecki. Powered by p3k. This site supports Webmention.
Except where otherwise noted, text content on this site is licensed under a Creative Commons Attribution 3.0 License.
IndieWebCamp Microformats Webmention W3C HTML5 Creative Commons
WeChat ID
aaronpk_tv