Zach’s ugly mug (his face)

Zach Leatherman

Import your Disqus Comments to Eleventy

April 19, 2018

I’m slowly migrating off of Disqus. I want to keep my existing comment content though.

Migration is an easy sell:

  • A few KB of static HTML is faster than the Disqus JavaScript. I lazy-load Disqus but it’s 430KB ⚠️.
  • No third party JavaScript—no prying eyes!
  • Comments available without JavaScript.
  • Full control over markup and style of comments (samples provided below). Finally, I can use my web fonts 😎.
  • No annoying loading delay when someone direct-links to a comment on your page.

I wrote up the steps I took to import the Disqus export XML in my eleventy blog. This method:

  • Properly maintains comment threading as shown in the Disqus interface.
  • Uses gravatar for avatar images.
  • Works with any existing links to Disqus comments in the wild (and no annoying delay waiting for Disqus to load and jump to the comment).

As an intermediate step, I still allow users to load the Disqus interface to participate in the discussion but these comments will not be available statically until I do another export/import—this is super easy after you do it once.

My goal is to add webmentions (thanks Nicolas for the tip!), but full credit to Staticman and utterances which look great too.


Find out more about Eleventy:

Zach’s ugly mug (his face)

Zach is a Web Craftsperson with the award winning Filament Group. He’s currently fixated on web fonts and static site generators. His public speaking résumé includes talks in eight different countries at events like Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He also helps herd NEJS CONF and the NebraskaJS meetup. Read more about Zach »

3 Likes

Michal ČaplyginCarl Zulauf 🌹Jonathan Simcoe
1 Mention
  1. clicknow.in #

    Show original post I had the pleasure of attending an IndieWebCamp before the amazing Beyond Tellerrand conference a few weeks back and I’m still buzzing from the experience.I can’t really express how meaningful this experience was to me. An antithesis to the rat race of social media, IndieWebCamp was a roomful of kindred spirits that care about the web and their own websites and hosting their own content. It felt like the Google Reader days again, when everyone was blogging and writing on their own sites. I dunno if you can tell but I loved it. If you get the chance to attend one of these events, jump on it (I really want to run one in Omaha 👀).Webmentions, Disqus, WordPressAt the event I got a working example of webmentions going on my personal web site. I already had a static copy of my old Disqus comments that I’d exported (which included copies of old WordPress comments that I’d imported into Disqus 😎).Webmentions are made possible for static web sites when you use webmention.io, a service to log incoming entries. Another service, Bridgy, crawls social networking sites for mentions of my site and sends those over to webmention.io automatically.If I’ve already lost you, luckily Max Böck wrote up a lovely tutorial on how to do this using Eleventy (his site is amazing, too). Max also created an eleventy-webmentions starter project which has all the code for this. Hopefully we can get some form of this merged back into the upstream eleventy-base-blog too.You can see an example of how the webmentions look on my site at one of my recent blog posts: Google Fonts is Adding font-display.Sentiment AnalysisHosting my own content and comments allows me to be a bit more creative with it. So I decided to take this a step further and have a little fun with negative comments.First, how do we find out if a comment is negative? Let’s try to use Natural, a plugin on npm. I added a Liquid filter to my Eleventy configuration file to analyze text and spit out a sentiment value. 0 is neutral, < 0 is negative, and > 0 is positive. Note that this natural language processing isn’t 100% (sometimes I’ll get a false positive) but this is just a fun demo on my site.const Natural = require('natural'); const analyze = new Natural.SentimentAnalyzer("English", Natural.PorterStemmer, "afinn"); module.exports = function(eleventyConfig) { eleventyConfig.addLiquidFilter("getSentimentValue", function(content) { if( content ) { const tokenizer = new Natural.WordTokenizer(); return analyze.getSentiment(tokenizer.tokenize(content)); } return 0; }); };And then in my Liquid template, I use this integer value to add a static-comments-reply-salty class: Book Early and Save! Find special deals to hot destinations only on CheapAir.comeBooks.com - Download a book today{% assign sentiment = webmention.content.text | getSentimentValue %} … And then in my stylesheet, I use this class to opt-into a lovely stack of Comic Sans, Chalkboard, and of course a fantasy fallback for kicks:.static-comments-reply-salty { font-family: Comic Sans MS, Chalkboard SE, fantasy; }As extra credit, I also used the random-case plugin to mODifY tHe TeXt (at David Darnes excellent recommendation).How does it look?This was taken from a real comment on my site.Before:After:This isn’t intended to be a hot-take on Comic Sans. Instead it’s meant to change the tone of the negativity to make it sound like a clown is yelling at a kid’s birthday party. team_clicknow See author's posts Share Tags: commenting, Link, typography