[SOLVED] Jekyll and embedded commenting with Muut

felixculpa · 2014-06-16 06:46:03

Hi all, wasn't sure if I should post this here or perhaps in the off-topic section. I am hoping someone could give some tips or a workaround for my current situation.

I am using Jekyll to build a static blog and I have everything set up and running nicely (domain name is bought and I am hosting through Amazon). However there is a small technical issue, well I am hoping it is small enough that there is a simple solution I cannot see.

I am using Muut for the embedded comments. The problem is: for each blog post I need to insert some html that points to a unique url to keep all the comments seperate instead of a unified forum. I am using the "Paths" feature described here. So for each post I need to put:

<a class="muut"
href="https://muut.com/i/my_forum_name/blog/comments:article-title">Comments</a>
<script src="//cdn.muut.com/1/moot.min.js"></script>

This is a problem because if I do

jekyll build

in the folder where I keep my blog it will overwrite the _site folder including all the html I need to insert on each post. Surely there is a shortcut or workaround to this issue I am missing? I really like Muut and don't want to abandon it.

I like using jekyll to write posts and quickly sync to the amazon bucket because it's so convenient and easy... I may be wishing for the best of both worlds here but I really hope I can keep this functionality and use muut as well.

Last edited by felixculpa (2014-06-16 15:24:36)

ANOKNUSA · 2014-06-16 14:33:20

The _site/ directory is the output directory. Absolutely none of your work should be kept there, since (as you mentioned) it's overwritten every time you compile the site. The absolute simplest way to do this would be to manually add the unique URL at the bottom of each post. However, while I'd never heard of Muut it looks like you could just use a Liquid "for" loop in your template that runs over each post and inserts the proper code at the correct point on each generated page:

[some code here]

{% for post in site.posts %}
<a id="muut" href="https://muut.com/i/my_forum_name/blog/comments:{{ page.title }}">Comments</a>
{% endfor %}

[more code here]

Just source the script from the Muut CDN in the <head> section of your template. If the "my_forum_name" bit changes with each post, you'll need to replace "my_forum_name" with some Liquid variable to account for that as well. And since (I assume) only one comments section appears in the layout, <id="muut"> would be preferable to <"class=muut.">

EDIT: Typos.

Last edited by ANOKNUSA (2014-06-16 14:51:53)

felixculpa · 2014-06-16 14:36:59

This is the sort of thing I was suspecting, thanks for confirming and giving the explicit code! I think that should work, I'll let you know how it goes.

I have a post.html file in my _layouts folder and I suspect inserting that code right after {{ content }} should insert it into each post which would entirely fix the problem. So:

{% for post in site.posts %}
<a class="muut" href="https://muut.com/i/"my_forum_name"/blog/comments:{{ page.title }}">Comments</a>
{% endfor %}

in my post.html layout file.

Last edited by felixculpa (2014-06-16 14:58:16)

progandy · 2014-06-16 14:42:28

ANOKNUSA wrote:

And since (I assume) only one comments section appears in the layout, <id="muut"> would be preferable to <"class=mutt.">

class="muut" is used by a javascript to load the comments and display them, so don't use id if you want that.
Edit: You could also put the javascript before </body> in _layouts/layout.html and the muut link in _layouts/post.html

Last edited by progandy (2014-06-16 14:45:09)

ANOKNUSA · 2014-06-16 14:50:37

progandy wrote:

ANOKNUSA wrote:
And since (I assume) only one comments section appears in the layout, <id="muut"> would be preferable to <"class=mutt.">
class="muut" is used by a javascript to load the comments and display them, so don't use id if you want that.
Edit: You could also put the javascript before </body> in _layouts/layout.html and the muut link in _layouts/post.html

Ah, good catch. Now that you mention it, I think Disqus does the same thing (I don't use it myself, but I remember something like that being the case when I looked into it).

felixculpa · 2014-06-16 15:23:46

This was the minimum I needed to insert near the end of my post.html, and now everything works as desired, and as it should!

<a class="muut"
href="https://muut.com/i/<my_forum_name>/blog/comments:{{ page.title }}">Comments</a>
<script src="//cdn.muut.com/1/moot.min.js"></script>

The liquid variable was the key.

Last edited by felixculpa (2014-06-16 15:24:11)

Arch Linux

#1 2014-06-16 06:46:03

[SOLVED] Jekyll and embedded commenting with Muut

#2 2014-06-16 14:33:20

Re: [SOLVED] Jekyll and embedded commenting with Muut

#3 2014-06-16 14:36:59

Re: [SOLVED] Jekyll and embedded commenting with Muut

#4 2014-06-16 14:42:28

Re: [SOLVED] Jekyll and embedded commenting with Muut

#5 2014-06-16 14:50:37

Re: [SOLVED] Jekyll and embedded commenting with Muut

#6 2014-06-16 15:23:46

Re: [SOLVED] Jekyll and embedded commenting with Muut

Board footer