add html parser and test blog

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

elm.json

@@ -9,12 +9,15 @@
             "elm/browser": "1.0.2",
             "elm/core": "1.0.5",
             "elm/html": "1.0.0",
-            "elm/url": "1.0.0"
+            "elm/url": "1.0.0",
+            "hecrj/html-parser": "2.4.0"
         },
         "indirect": {
             "elm/json": "1.1.3",
+            "elm/parser": "1.1.0",
             "elm/time": "1.0.0",
-            "elm/virtual-dom": "1.0.3"
+            "elm/virtual-dom": "1.0.3",
+            "rtfeldman/elm-hex": "1.0.0"
         }
     },
     "test-dependencies": {

src/Blog.elm

@@ -2,6 +2,8 @@ module Blog exposing (..)
 
 import Html exposing (..)
 import Html.Attributes exposing (class)
+import Html.Parser
+import Html.Parser.Util
 
 
 
@@ -33,15 +35,7 @@ view model =
     div [ class "foo-interface" ]
         [ div [ class "max-width mx-auto px3 ltr" ]
             [ div [ class "content index py4" ]
-                [ article [ class "post" ]
-                    [ h1 [ class "posttitle" ] [ text model.blog.title ]
-                    , div [ class "meta" ]
-                        [ div [ class "article-tag" ]
-                            [ a [ class "tag-link" ] [ text "tag" ] ]
-                        ]
-                    , div [ class "content" ] [ text model.blog.content ]
-                    ]
-                ]
+                (textToHtml testString)
             ]
         ]
 
@@ -71,3 +65,80 @@ update msg model =
     case msg of
         Nothing ->
             ( model, Cmd.none )
+
+
+textToHtml : String -> List (Html.Html msg)
+textToHtml text =
+    case Html.Parser.run text of
+        Ok nodes ->
+            Html.Parser.Util.toVirtualDom nodes
+
+        Err _ ->
+            []
+
+
+testString : String
+testString =
+    """
+    <div id="header">
+    <a href="/">
+        <div id="logo" style="background-image: url(/images/logo.png);"></div>
+        <div id="title">
+            <h1>Hexo</h1>
+        </div>
+    </a>
+    <div id="nav">
+        <ul>
+            <li class="icon">
+                <a href="#" aria-label="Menu"><i class="fas fa-bars fa-2x"></i></a>
+            </li>
+            <li><a href="/">Home</a></li>
+            <li><a href="/about/">About</a></li>
+            <li><a href="/archives/">Writing</a></li>
+            <li><a target="_blank" rel="noopener" href="http://github.com/probberechts">Projects</a></li>
+        </ul>
+    </div>
+    </div>
+    <section id="about">
+        <p>
+            Find me on
+            <a class="icon" target="_blank" rel="noopener" href="http://github.com/probberechts/cactus-dark"
+                aria-label="github">
+                <i class="fab fa-github"></i>
+            </a>
+            <a class="icon" target="_blank" rel="noopener" href="/" aria-label="twitter">
+                <i class="fab fa-twitter"></i>
+            </a>
+            <a class="icon" target="_blank" rel="noopener" href="/" aria-label="facebook">
+                <i class="fab fa-facebook"></i>
+            </a>
+            <a class="icon" target="_blank" rel="noopener" href="/" aria-label="linkedin">
+                <i class="fab fa-linkedin"></i>
+            </a>and
+            <a class="icon" target="_blank" rel="noopener" href="mailto:name@email.com" aria-label="mail">
+                <i class="fas fa-envelope"></i>
+            </a>
+        </p>
+    </section>
+    <section id="writing">
+        <span class="h1"><a href="/archives/">Writing</a></span>
+        <ul class="post-list">
+            <li class="post-item">
+                <div class="meta">
+                    <time datetime="2022-09-15T17:21:59.000Z" itemprop="datePublished">2022-09-15</time>
+                </div>
+                <span>
+                    <a class="" href="/posts/techtest/hey-world">Hello</a>
+                </span>
+            </li>
+            <li class="post-item">
+                <div class="meta">
+                    <time datetime="2022-09-05T17:21:59.000Z" itemprop="datePublished">2022-09-05</time>
+                </div>
+                <span>
+                    <a class="" href="/posts/tech/hello-world">Hello World</a>
+                </span>
+            </li>
+        </ul>
+    </section>
+    """

src/Main.elm

@@ -147,7 +147,11 @@ update msg model =
         GotBlogMsg blogMsg ->
             case model.page of
                 BlogPage blog ->
-                    toBlog model (Blog.update blogMsg blog)
+                    toBlog
+                        { model
+                            | title = blog.blog.title ++ " | " ++ model.title
+                        }
+                        (Blog.update blogMsg blog)
 
                 _ ->
                     ( model, Cmd.none )