Blog Comments
Tags: webdev, google, github, html
Published: 2024-01-19 15:18:10

Note: this post was originally published on the [gdocweb blog](https://blog.gdocweb.com/blog-comments.html).

## Comments are Now Available in gdocweb

gdocweb draws its power from Google Docs. It also inherits some of the Google Docs limitations. One such limitation is the rigidness of the platform, a great example would be in blog comments. With most tools we can simply add a comment widget and end on a high note. However, Google Docs has no feature like that.

One suggested solution is to extend Google Docs, but I think it goes a bit against the grain of a product like gdocweb. Ideally, we just want to give a small hint: comments should go here. This should be simple. Ideally, it would be hidden. That way the document can be used both in print and for the web, but we found no way to do that. In that spirit, we chose to borrow an idea from markdown and use a special syntax to convey special meanings.

We do that by using a special syntax “::COMMENTS::”. The quotes aren’t part of the syntax. In order to use this hint it must be the first entry in a paragraph, otherwise it will be ignored. You can see how this works by looking at the [Google Doc we used to generate this post](https://docs.google.com/document/d/1EycVw7Txmhc7jV6fDwaK2Q3P85hqji52-04cu8KkoOk/edit?usp=sharing).

## Setting up Comments

Typically, a comment requires server side code and a lot of messy management. It’s a pain. These comments rely on a tool called [utterances](https://utteranc.es/). Utterances uses GitHub’s issue tracker which was designed to track bugs, as part of that it includes extensive comment and discussion capabilities. If an issue doesn’t exist, utterances will automatically create that issue for you. It created [this issue](https://github.com/shai-almog/GdocwebBlog/issues/6) for the comments in this page...

As the administrator of the GitHub repository I can delete comments and block commenters. Comments can include rich text using markdown and are pretty powerful.

The server side functionality is handled by a GitHub application from Utterance. To get it working you first need to [install the Utterance app](https://github.com/apps/utterances) and give it permissions. When visiting [https://github.com/apps/utterances](https://docs.google.com/document/d/1EycVw7Txmhc7jV6fDwaK2Q3P85hqji52-04cu8KkoOk/edit?usp=sharing) you will need to click install:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pj21tqvbdpkmlr25u00a.png)

This will lead you to this page in which you will need to select the account for the app. Since the blog is hosted on my personal GitHub account I chose that.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r9pu3z0ywuagbbwfi5t1.png)

Next we need to pick the repositories or alternatively allow utterance access to all repositories. Once this is done the comments should work on any page where they are included...

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kkt3jrlw1whwljfjlcl.png)

## Future Improvements

This is the tip of the iceberg. We plan to include additional hints to allow features ranging from custom HTML to sophisticated stylings and customizations. Let us know what you think in the comments!

You can see the document that generated this post [here](https://docs.google.com/document/d/1EycVw7Txmhc7jV6fDwaK2Q3P85hqji52-04cu8KkoOk/edit?usp=sharing).