..

Part 4, Comments App: Intergation

This is a continuation of an earlier post, see:

To integrate the comments on any format like Jekyll-, WordPress-, etc. or any self-written website, I want to provide a simple js-File, which should be as small as possible to not unnecessarily bloat things up.

First Approach

First I used a single javascript file, which was dependent on jquery. I used jquery once long time ago. And I think it is nice in general, but for this use case it’s to heavy-weight; ~88 kB (compressed, production jQuery 3.6.0).

The best way doing it would be to write it in vanilla javascript.

Other Approaches

Because i was familiar with Vue, I started to look into possibilities there and compared as follows:

  • Vue Web Component ~16 kB + “my code” depending on how many features are used…
  • petite vue ~6 kB + “my code”
  • Jquery ~88 kB + “my code”
  • Vanilla minified 9~ kB –> way to go

Final Integration

I provide some integration scripts to provide an easy integration. It is all written in plain javascript with inline styles to not have to integrate multiple files and/or to thinker with css. Additionally, the script size is only ~9 kB, which is very small. First I wanted to use jquery, which is at least 88 kB.

Check out this directory in the project’s GitHub repository to find integration scripts.

Jekyll

Add these two things to your post layout in _layouts/post.html. The first id: comment-title is necessary to have a nice title in the admin interface later.

<h1 id="comment-title">Part 4, Comments App&#58; Intergation</h1> <!-- (1) -->
...
<div id="comment-section"></div> <!-- (2) -->

Alteration (1) is not mandatory to get the app working. If you strictly don’t care of a nice title and would be fine with just the url https://blog.example/post1 instead of title of post1 you can take the integration script comments-no-title.js and only add tag (2).

Put the necessary comments.js or comments-no-title.js in assets/js.

The comments js can then be added in whichever post you want to have the comments activated. It depends a little on your Jekyll theme, how you would to that… In the end it should load at the very end of your post, so that the DOM is rendered already. Or you wrap the whole comments.js in $(document).ready(function)

Other

I happily list other integration scenarios. Make your suggestions.