Added GraphComments and blog post about comments

config/_default/config.yaml

@@ -26,4 +26,6 @@ menu:
       weight: 40
 markup:
   highlight:
-    noClasses: false
+    noClasses: false
+Params:
+  graphcommentId: 'kotoblog-pp-ua'

content/blog/2024-01-10-graph-comment/index.md

@@ -0,0 +1,42 @@
+---
+title: "Graph Comments on Hugo website"
+date: 2024-01-09T11:09:38+02:00
+draft: false
+tags: [hugo]
+---
+
+At my interview at Open Web I faced with the challenge of diagramming a comment storage and display system. 
+Even I was rejected to the position, I learned a lot from this experience and
+I think I start better understand the complexity of such solutions. 
+While the specifics of the interview remain confidential under NDA, 
+the lessons learned continue to resonate in my technical pursuits.
+
+Researching the landscape, I discovered that **Disqus**, a major competitor of the **Open Web**. 
+I used Disqus before when this blog was based on the **Symfony Framework**. 
+Despite having utilized Disqus in the past, 
+concerns over data privacy prompted me to forgot third-party solutions. 
+Instead, I embarked on 
+a [10-hour coding marathon](https://github.com/spolischook/kotoblog_v2/commit/d6e192eb31683d4ba8a1598fe61b1a060d67fe9e), 
+leveraging Symfony components to engineer a custom comment system for my website – 
+which I described in [this article](../bye-bye-disqus).
+
+Fast forward to the present, where my tech blog underwent a transformation 
+onto the **Hugo framework**. 
+Eager to reinstate comments on my articles, 
+I explored [alternatives](https://gohugo.io/content-management/comments/#alternatives) within the Hugo community. 
+With around ten potential solutions at my fingertips, 
+I randomly choose [Graph Comment](https://www.graphcomment.com) -
+a decision that proved fruitful, taking less than an hour to integrate seamlessly.
+
+![creating website account on GraphComment.com](./creating-graphcomment-website.png)
+
+I added my [custom shortcode](https://github.com/spolischook/kotoblog_v3/layouts\shortcodes\comments.html) with a few variables inside,
+and [used in the page itself](https://github.com/spolischook/kotoblog_v3/content\blog\2024-01-10-graph-comment\index.md).  
+
+![test comments on the website](./comments-example.png)
+
+### Conclusion
+
+My experience with Hugo has been remarkably positive, particularly for public websites. Its versatility and robust features have provided an excellent foundation for my tech blog's transformation. The extensibility of Hugo allows for seamless integration of additional functionalities, making it a dynamic and scalable solution. Moreover, as I explored alternatives for comments within the market, it became evident that the landscape is rich with options. While Graph Comment proved to be a quick and effective choice for my needs, the maturity and refinement of longstanding services in the comments domain make it clear that there are numerous well-polished alternatives to suit diverse preferences and requirements.
+
+{{< comments >}}

content/blog/bye-bye-disqus/index.md

@@ -13,7 +13,8 @@ draft: false
 
 Оказалось что Disqus рос и со временем стал немалой по мировым меркам рекламной платформой.
 И как водится в мире маркетинга они делятся некоторыми своими (на самом деле моими и вашими) данными со своими партнерами.
-<img src="./disqus-partners.png" class="img-fluid">
+
+![disqus ](./disqus-partners.png)
 
 Когдато хороший бесплатный сервис (на самом деле он таким и остался) вырос из детских штанишек и стал большой рекламной платформой и маркетинговой фермой.
 Незнаю почему но мне не давал покоя этот кусок JavaScript которой делает на моем сайте что ему вздумается.
@@ -42,4 +43,5 @@ draft: false
 На сим все, теперь пишите комменты.
 
 P.S. скрин результата:
-<img src="./comments.png" class="img-fluid">
+
+![final result of the task](./comments.png)

layouts/shortcodes/comments.html

@@ -0,0 +1,29 @@
+<section id="graphcomment"></section>
+<script type="text/javascript">
+
+/* - - - CONFIGURATION VARIABLES - - - */
+
+var __semio__params = {
+    graphcommentId: "{{ .Site.Params.graphcommentId  }}", // obviously you need to create your own ID on graphcomment.com
+
+    behaviour: {
+        // HIGHLY RECOMMENDED
+        uid: "{{ replace .Page.RelPermalink "/" "-" }}", // uniq identifer for the comments thread on your page (ex: your page id)
+    },
+
+    // configure your variables here
+
+}
+
+/* - - - DON'T EDIT BELOW THIS LINE - - - */
+
+function __semio__onload() {
+    __semio__gc_graphlogin(__semio__params)
+}
+(function() {
+    var gc = document.createElement('script'); gc.type = 'text/javascript'; gc.async = true;
+    gc.onload = __semio__onload; gc.defer = true; gc.src = 'https://integration.graphcomment.com/gc_graphlogin.js?' + Date.now();
+    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(gc);
+})();
+
+</script>