Enabling Comments

Tuesday, 15 October 2024 - ⧖ 3 min

Marmite as a static site generator, doesn't have commenting features, but there are various options of external commenting systems to integrate.

Utterances

Use github issues as comment system
Requires user to login to github

Giscus

Use Github discussions as comment system
requires user to login to github

Hatsu

Federated to ActivityPub
Requires a running instance
Requires user to comment from a fediverse account.

Altearnatives are Disqus and Commento.

For now the easiest system is Giscus.

Setting up Giscus

  1. First you need to have a github repository
    • if you used the starting repo you already got one.
    • You can create a repository solely for comments, the blog doesn't need to be hosted on the same repo.
  2. The repository must be public, otherwise visitors will not be able to view the discussion.
  3. Install giscus app on your repo, otherwise visitors will not be able to comment and react.
  4. The Discussions feature must be enabled on your repository.

Now go to https://giscus.app/ and find the configuration section, configure ir and and Copy the <script ... /script>.

Now there are 2 ways to add it to Marmite

  1. On a markdown fragment

Add a _comments.md to your content folder.

##### Comments

<script src="https://giscus.app/client.js"
        data-repo="rochacbruno/marmite"
        data-repo-id="R_kgDONAKMvQ"
        data-category="Comments"
        data-category-id="DIC_kwDONAKMvc4CjmH_"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="en"
        data-loading="lazy"
        crossorigin="anonymous"
        async>
</script>
  1. Alternatively, add to marmite.yaml extra section.
extra:
  comments:
    title: Comments
    source: |
        <script src="https://giscus.app/client.js"
        data-repo="yourrepo/blog"
        data-repo-id="sdsdsd"
        data-category="Announcements"
        data-category-id="dfsffsdfsdfsdfsdf"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="top"
        data-theme="preferred_color_scheme"
        data-lang="en"
        data-loading="lazy"
        crossorigin="anonymous"
        async>
        </script>

Setting up other comment systems

The process will be very similar, you just need to grab the required script and tags.

extra:
  comments:
    title: Comments
    source: |
        <div id="comment-system"></div>
        <script src="https://commentsystem.app/foo/bar/dothethings.js"></script>

Customizing the HTML template directly

Add templates/comments.html to your project.

<article>
<header>{{site.extra.comments.title | default(value="Comments") }}</header>
{{site.extra.comments.source}}
</article>

Please consider giving a ☆ on Marmite Github repository, that helps a lot!

Comments