Part 4, Comments App: Intergation
This is a continuation of an earlier post, see:
- Part 1, Comments App: Overview
- Part 2, Comments App: Proof of Work
- Part 3, Comments App: Admin and Reply
- Test the Comments App
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.
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
Check out this directory in the project’s GitHub repository to find integration scripts.
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: 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
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
I happily list other integration scenarios. Make your suggestions.