add comment system to the blogs

Signed-off-by: Avinal Kumar <avinal.xlvii@gmail.com>

src/Layouts/Blog.elm

@@ -3,7 +3,7 @@ module Layouts.Blog exposing (Model, Msg, Settings, layout)
 import Components.Footer exposing (footerLinksToSide)
 import Effect exposing (Effect)
 import Html
-import Html.Attributes exposing (class)
+import Html.Attributes exposing (class, id)
 import Layout exposing (Layout)
 import Route exposing (Route)
 import Shared
@@ -77,6 +77,7 @@ view { fromMsg, model, content } =
             [ Html.div [ class "relative w-full bg-neutral  md:max-w-3xl md:mx-auto lg:max-w-4xl lg:pb-28" ]
                 [ Html.article [ class blogTheme ]
                     content.body
+                , Html.div [ id "remark42", class "md:px-4 mb-16" ] []
                 ]
             ]
         , footerLinksToSide

src/Pages/Posts.elm

@@ -137,7 +137,7 @@ view model =
     in
     case model.blogList of
         Just blogList ->
-            { title = "Blog by Avinal"
+            { title = "Blog"
             , body =
                 [ Html.section [ class "text-gray-100" ]
                     [ Html.h1 [ class "text-5xl font-bold mb-6 mt-12 text-center text-white" ] [ Html.text <| "Welcome to my blog" ]

src/Pages/Posts/Category_/Post_.elm

@@ -3,7 +3,7 @@ module Pages.Posts.Category_.Post_ exposing (Model, Msg, page)
 import Components.Footer exposing (avatarAndLinks)
 import Effect exposing (Effect)
 import Html exposing (Html)
-import Html.Attributes exposing (alt, class, datetime, href, src, title)
+import Html.Attributes exposing (alt, class, datetime, href, id, src, title)
 import Http
 import Layouts
 import Page exposing (Page)
@@ -123,7 +123,7 @@ view : Model -> View Msg
 view model =
     case model.blog of
         Just blog ->
-            { title = "Blog | " ++ blog.meta.title
+            { title = blog.meta.title ++ " | Blog"
             , body =
                 [ Html.div [ class "bg-neutral-900 md:-mx-8 lg:-mx-16 px-8 py-1" ]
                     [ Html.header [ class "relative" ]
@@ -144,14 +144,7 @@ view model =
                     , Html.span [ class "text-base font-light float-right" ] [ Html.a [ href "", class "hover:text-pink-500" ] [ Html.abbr [ class "fa-solid fa-link no-underline", title "Share this article" ] [] ] ]
                     , articleNode blog.content model.fragment blog.meta.title blog.meta.description
                     ]
-                , Html.div [ class "text-center text-neutral-300 border-dashed border-teal-500 p-2" ]
-                    [ Html.text "Published under "
-                    , Html.a [ href "https://www.mozilla.org/en-US/MPL/2.0/" ] [ Html.text "Mozilla Public License 2.0" ]
-                    , Html.text "  if you found an issue with the page, please report it "
-                    , Html.a [ href <| "https://github.com/avinal/avinal.github.io/issues/new?title=bug:+" ++ String.replace " " "+" blog.meta.title ] [ Html.text "here." ]
-                    ]
                 , UU.categoryNtags blog.meta.category blog.meta.tags
-                , avatarAndLinks
                 ]
             }
 

src/web-components/MarkedRender.js

@@ -70,6 +70,30 @@ customElements.define(
       }
     }
 
+    addComments() {
+      window.remark_config = {
+        host: "https://remark42.avinal.space",
+        site_id: "remark",
+        theme: "dark",
+        show_rss_subscription: false,
+        no_footer: true,
+      };
+
+      !(function (e, n) {
+        for (var o = 0; o < e.length; o++) {
+          var r = n.createElement("script"),
+            c = ".js",
+            d = n.head || n.body;
+          "noModule" in r
+            ? ((r.type = "module"), (c = ".mjs"))
+            : (r.async = !0),
+            (r.defer = !0),
+            (r.src = remark_config.host + "/web/" + e[o] + c),
+            d.appendChild(r);
+        }
+      })(remark_config.components || ["embed"], document);
+    }
+
     runMarked() {
       const renderer = new marked.Renderer();
       const data = this.getAttribute("markdowndata");
@@ -134,6 +158,7 @@ customElements.define(
       this.innerHTML = marked.parse(data);
       console.log("Markdown rendering complete!");
       this.addLineNumber();
+      this.addComments();
 
       if (fragment) {
         console.log(