DEV Community

Be Hai Nguyen
Be Hai Nguyen

Posted on

3 3

GitHub: Enable Comments Using https://utteranc.es/ Comment Widget.

I've been blogging with GitHub for a bit, please see https://behai-nguyen.github.io/. In this post, we discuss how to enable comments for GitHub repositories using https://utteranc.es/ comment widget.

024-feature-image.png

This is how I did it:

❶ Install utterances app for the target GitHub repo via the following link https://github.com/apps/utterances/installations/new -- the instructions should be self-explanatory. After each step, please read the on screen instructions carefully.

❷ I'd like to enable comments for my GitHub Pages, so the repo I selected is https://github.com/behai-nguyen/behai-nguyen.github.io. The plugin snippet is customised like below:

<script src="https://utteranc.es/client.js"
    repo="behai-nguyen/behai-nguyen.github.io "
    issue-term="pathname"
    label="Comment"
    theme="github-light"
    crossorigin="anonymous"
    async>
</script>
Enter fullscreen mode Exit fullscreen mode

❸ The Jekyll -- https://jekyllrb.com/ theme I'm using is minima 2.5.1 -- https://rubygems.org/gems/minima/versions/2.5.1 , I modified the footer.html file to include the plugin snippet as shown:

File: \_includes\footer.html
Enter fullscreen mode Exit fullscreen mode
<footer class="site-footer h-card">
  <data class="u-url" href="{{ "/" | relative_url }}"></data>

  <div class="wrapper">

    <div class="utterances">
        <script src="https://utteranc.es/client.js"
            repo="behai-nguyen/behai-nguyen.github.io"
            issue-term="pathname"
            label="Comment"
            theme="github-light"
            crossorigin="anonymous"
            async>
        </script>     
    </div>

    <h2 class="footer-heading">{{ site.title | escape }}</h2>

    <div class="footer-col-wrapper">
      <div class="footer-col footer-col-1">
        <ul class="contact-list">
          <li class="p-name">
            {%- if site.author -%}
              {{ site.author | escape }}
            {%- else -%}
              {{ site.title | escape }}
            {%- endif -%}
            </li>
            {%- if site.email -%}
            <li><a class="u-email" href="mailto:{{ site.email }}">{{ site.email }}</a></li>
            {%- endif -%}
        </ul>
      </div>

      <div class="footer-col footer-col-2">
        {%- include social.html -%}
      </div>

      <div class="footer-col footer-col-3">
        <p>{{- site.description | escape -}}</p>
      </div>
    </div>

  </div>

</footer>
Enter fullscreen mode Exit fullscreen mode

Of course, you can place it anywhere you like.

❹ After update GitHub repo with the change, we might need to issue the followings to get it to rebuild:

git commit --allow-empty -m "Trigger rebuild"
git push
Enter fullscreen mode Exit fullscreen mode

Please note the followings:

  • The Utterances Widget -- https://utteranc.es/ supports Markdown Styling -- see Markdown Here Cheatsheet.
  • To comment, users must sign into their GitHub account. Anonymous users are not supported.
  • It seems that after submitting comments, users can't edit them. Only the GitHub repo owners can edit comments ( or issues ).
  • Comments are stored as issues inside the target GitHub repo -- we, as target repo owner, can manage these issues.

I hope you get something out of this post... If you happen to read it on GitHub and found it useful, please give me a comment 😆... and thank you for reading.

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay