add blog listing fucntions

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

content/posts/blogs/gsod2020-report.md

@@ -5,7 +5,7 @@ modified: 2020-12-31 23:19
 category: development
 tags: [vlc, gsod, gsod2020]
 description: 'The project was to Create the VLC User Documentation for Android 
-Mobile Port which was previously hosted on VLC's wiki pages. The major portion 
+Mobile Port which was previously hosted on VLC wiki pages. The major portion 
 of this was to start everything from scratch including chapter separation, 
 section organization.'
 ---

content/posts/development/wsl2-move.md

@@ -21,13 +21,13 @@ use WinKey + X shortcut and select **Windows PowerShell(Admin)**.
 2. Check if the WSL 2 installation you are planning to move is is
 currently running/stopped.
 
-```powershell
+  ```powershell
-PS C:\\Users\\Avinal> wsl -l -v
+  PS C:\\Users\\Avinal> wsl -l -v
-PS C:\\Users\\Avinal>
+  PS C:\\Users\\Avinal>
     NAME      STATE           VERSION
-* Ubuntu    Running         2
+  * Ubuntu    Running         2
     Kali      Stopped         2
-```
+  ```
 
 3. If its running then you must stop the particular WSL distribution.
 (*Ubuntu* used as example)

content/posts/posts.json

@@ -0,0 +1,65 @@
+[
+  {
+    "title": "The Big Red Ants",
+    "date": "2012-02-27 22:47",
+    "category": "article",
+    "description": "The Big Red Ants",
+    "slug": "big-red-ants"
+  },
+  {
+    "title": "प्रेम रतन धन पायो",
+    "date": "2019-09-21 15:47",
+    "category": "article",
+    "slug": "for-sunshine",
+    "description": "प्रकृति की सुंदरता और कलाकारी हिमालय की कण-कण में झलकती है। प्रकृति ने प्रेम को भी हिमालय के जितना ही विशाल और अलौकिक बनाया है । ये एक अलग चर्चा का विषय है कि हिमालय पहले आया या प्रेम। मैं तो प्रेम के पक्ष में हूँ । वो हर अणु-परमाणु जिन्होंने इतने बड़ा पहाड़ खड़ा किया वो सब आपस में प्रेम से बंधे हुए हैं। ये पृथ्वी, सूर्य, चंद्रमा, आकाश-गंगा इत्यादि सब प्रेम से बंधे हुए हैं"
+  },
+  {
+    "title": "Create the VLC User Documentation for one Mobile Port(Android)",
+    "date": "2020-12-01 23:47",
+    "category": "development",
+    "description": "The project was to Create the VLC User Documentation for Android Mobile Port which was previously hosted on VLC wiki pages. The major portion of this was to start everything from scratch including chapter separation, section organization.",
+    "slug": "gsod2020-report"
+  },
+  {
+    "title": "HRT (Hudson River Trading) Systems Internship Interview Experience",
+    "date": "2021-01-04 21:47",
+    "category": "blog",
+    "slug": "hrt-interview-1",
+    "description": "uestions were clear and of medium level. But they were designed in such a way that you must know the basics before you could attempt. Also, they expected a clear and concise approach."
+  },
+  {
+    "title": "Google Summer of Code 2021",
+    "date": "2021-08-19 23:07",
+    "category": "development",
+    "description": "This is the final report of my Google Summer of Code 2021 at The FOSSology Project.",
+    "slug": "final-evaulation"
+  },
+  {
+    "title": "I am loving it! RedHat",
+    "date": "2022-02-25 20:47",
+    "category": "development",
+    "description": "I made it to the Red Hat as a DevTools intern. This post is about onboarding and how I prepared myself for working on the actual project.",
+    "slug": "i-am-loving-it-redhat"
+  },
+  {
+    "title": "Developing Minimal Tekton Server",
+    "date": "2022-02-27 20:47",
+    "category": "development",
+    "description": "This blog is a descreptive account of the development of Minimal Tekton Server. This is highly technical in nature, so please make sure that you have sufficient knowledge about Golang, Docker, Kubernetes and TektonCD. You can refer to my [previous blog](\"https://avinal.space/posts/development/i-am-loving-it-redhat.html\") to know about these topics.",
+    "slug": "lovely-dangerous-things-redhat"
+  },
+  {
+    "title": "How I implemented WakaTime embeddable Coding Graph GHA?",
+    "date": "2021-02-02 21:47",
+    "category": "development",
+    "description": "If you use WakaTime to track your coding activity. You can add that to your README as a bar graph or embed it in your blog/portfolio. Just add this action to any of your repositories and there you have it.",
+    "slug": "wakatime"
+  },
+  {
+    "title": "Move WSL 2 Safely to another Drive",
+    "date": "2020-12-31 19:07",
+    "category": "development",
+    "description": "It is real pain when you have small SSD and Windows Subsystem for Linux (WSL) is growing exponentially in size. There is no easy way to move the WSL installation to another drive. Here in this blog I will discuss how to tackle this problem with bite size steps.",
+    "slug": "wsl2-move"
+  }
+]

elm.json

@@ -7,25 +7,27 @@
     "dependencies": {
         "direct": {
             "MaybeJustJames/yaml": "2.1.2",
+            "NoRedInk/elm-json-decode-pipeline": "1.0.1",
             "elm/browser": "1.0.2",
             "elm/core": "1.0.5",
             "elm/html": "1.0.0",
             "elm/http": "2.0.0",
+            "elm/json": "1.1.3",
             "elm/parser": "1.1.0",
             "elm/url": "1.0.0"
         },
         "indirect": {
             "elm/bytes": "1.0.8",
             "elm/file": "1.0.5",
-            "elm/json": "1.1.3",
             "elm/regex": "1.0.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": {
         "direct": {},
-        "indirect": {}
+        "indirect": {
+            "rtfeldman/elm-hex": "1.0.0"
+        }
     }
 }

src/Blog.elm

@@ -2,10 +2,12 @@ port module Blog exposing (..)
 
 import Base exposing (..)
 import Html exposing (..)
-import Html.Attributes exposing (class, href, id, src, style)
+import Html.Attributes exposing (class, datetime, href, id, src, style)
 import Http exposing (Error(..))
+import Json.Decode as Json
+import Json.Decode.Pipeline exposing (required)
 import Url exposing (Protocol(..))
-import Yaml.Decode as Yaml exposing (Decoder, field, list, string)
+import Yaml.Decode as Yaml
 
 
 
@@ -14,10 +16,11 @@ import Yaml.Decode as Yaml exposing (Decoder, field, list, string)
 
 type alias Model =
     { blog : Maybe Blog
-    , markdownUrl : String
+    , requestUrl : String
     , success : Bool
     , fragment : String
     , error : Maybe String
+    , bloglist : Maybe (List JsonMeta)
     }
 
 
@@ -34,10 +37,11 @@ type alias Blog =
 initialModel : Model
 initialModel =
     { blog = Nothing
-    , markdownUrl = ""
+    , requestUrl = ""
     , success = False
     , fragment = ""
     , error = Nothing
+    , bloglist = Nothing
     }
 
 
@@ -58,7 +62,8 @@ view model =
         [ div [ class "foo-console foo-terminal foo-active" ]
             [ div [ class "page-wrapper category-html document-page" ]
                 [ div [ class "main-wrapper" ]
-                    [ main_ [ class "main-content", id "content" ]
+                    [ div [] (viewBlogList model)
+                    , main_ [ class "main-content", id "content" ]
                         [ case model.blog of
                             Just blog ->
                                 case blog.meta.image of
@@ -138,7 +143,7 @@ viewMetadata model =
                                                 blog.meta.title
 
                                             Nothing ->
-                                                model.markdownUrl
+                                                model.requestUrl
                                        )
                                 )
                             ]
@@ -154,9 +159,46 @@ viewMetadata model =
         ]
 
 
+viewBlogListItem : JsonMeta -> Html Msg
+viewBlogListItem meta =
+    div []
+        [ hr [] []
+        , div [ class "foo-term-story" ]
+            [ div []
+                [ span []
+                    [ i [ class "fa-regular fa-clock" ] []
+                    , time [ datetime meta.date ] [ text meta.date ]
+                    , text " in "
+                    , i [ class "fa-regular fa-folder-open" ] []
+                    , a [ href ("/posts/" ++ meta.category) ]
+                        [ text meta.category ]
+                    ]
+                ]
+            , br [] []
+            , h2 []
+                [ a [ href ("/posts/" ++ meta.category ++ "/" ++ meta.slug) ]
+                    [ text meta.title ]
+                ]
+            , br [] []
+            , p [] [ text meta.description ]
+            ]
+        ]
+
+
+viewBlogList : Model -> List (Html Msg)
+viewBlogList model =
+    case model.bloglist of
+        Just bloglist ->
+            h1 [] [ text "Blog" ]
+                :: List.map viewBlogListItem bloglist
+
+        Nothing ->
+            []
+
+
 type Msg
-    = GetMarkdown
+    = MdDataReceived (Result Http.Error String)
-    | DataReceived (Result Http.Error String)
+    | JsonDataReceived (Result Http.Error (List JsonMeta))
     | NoSuchPage
 
 
@@ -189,7 +231,7 @@ init pathList =
                         ++ ".md"
             in
             ( { initialModel
-                | markdownUrl = requestUrl
+                | requestUrl = requestUrl
                 , fragment = fragment
               }
             , getMarkdown requestUrl
@@ -206,7 +248,7 @@ init pathList =
                         ++ ".md"
             in
             ( { initialModel
-                | markdownUrl = requestUrl
+                | requestUrl = requestUrl
               }
             , getMarkdown requestUrl
             )
@@ -220,13 +262,13 @@ init pathList =
         --                 ++ ".md"
         --     in
         --     ( { initialModel
-        --         | markdownUrl = requestUrl
+        --         | requestUrl = requestUrl
         --       }
         --     , getMarkdown requestUrl
         --     )
         -- [ "categories" ] ->
         --     ( { blog = Nothing
-        --       , markdownUrl = urlPrefix ++ "/categories" ++ ".md"
+        --       , requestUrl = urlPrefix ++ "/categories" ++ ".md"
         --       , markDown = ""
         --       , success = False
         --       , fragment = ""
@@ -234,34 +276,55 @@ init pathList =
         --     , getMarkdown (urlPrefix ++ "/categories" ++ ".md")
         --     )
         [] ->
-            ( initialModel
+            ( { initialModel | requestUrl = Base.contentUrlPrefix ++ "/posts/posts.json" }
-            , Cmd.none
+            , getPostLists (Base.contentUrlPrefix ++ "/posts/posts.json")
             )
 
         _ ->
             ( initialModel, Cmd.none )
 
--- badPageError: String -> Cmd Msg
+
--- badPageError url =
+type alias JsonMeta =
+    { title : String
+    , date : String
+    , description : String
+    , category : String
+    , slug : String
+    }
 
 
+getPostLists : String -> Cmd Msg
+getPostLists url =
+    Http.get
+        { url = url
+        , expect = Http.expectJson JsonDataReceived (Json.list jsonMetaDecoder)
+        }
+
+
+jsonMetaDecoder : Json.Decoder JsonMeta
+jsonMetaDecoder =
+    required "title" Json.string <|
+        required "date" Json.string <|
+            required "description" Json.string <|
+                required "category" Json.string <|
+                    required "slug" Json.string <|
+                        Json.succeed JsonMeta
 
 
 getMarkdown : String -> Cmd Msg
 getMarkdown url =
     Http.get
         { url = url
-        , expect = Http.expectString DataReceived
+        , expect = Http.expectString MdDataReceived
         }
 
 
 update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
     case msg of
-        GetMarkdown ->
+        -- GetMarkdown ->
-            ( model, Http.get { url = model.markdownUrl, expect = Http.expectString DataReceived } )
+        --     ( model, Http.get { url = model.requestUrl, expect = Http.expectString MdDataReceived } )
-
+        MdDataReceived (Ok data) ->
-        DataReceived (Ok data) ->
             case splitMetaContent data of
                 Ok blog ->
                     ( { model | blog = Just blog, success = True }, sendString blog.content )
@@ -269,7 +332,13 @@ update msg model =
                 Err err ->
                     ( { model | success = False, error = Just err }, Cmd.none )
 
-        DataReceived (Err err) ->
+        MdDataReceived (Err err) ->
+            ( { model | success = False, error = Just (errorToString err) }, Cmd.none )
+
+        JsonDataReceived (Ok data) ->
+            ( { model | blog = Nothing, success = True, bloglist = Just data }, Cmd.none )
+
+        JsonDataReceived (Err err) ->
             ( { model | success = False, error = Just (errorToString err) }, Cmd.none )
 
         NoSuchPage ->
@@ -335,13 +404,13 @@ splitMetaContent data =
             Err ("YAML front matter parsing failed: " ++ Yaml.errorToString err)
 
 
-metaDecoder : Decoder YamlMeta
+metaDecoder : Yaml.Decoder YamlMeta
 metaDecoder =
     Yaml.map7 YamlMeta
-        (field "title" string)
+        (Yaml.field "title" Yaml.string)
-        (field "date" string)
+        (Yaml.field "date" Yaml.string)
-        (Yaml.maybe (field "description" string))
+        (Yaml.maybe (Yaml.field "description" Yaml.string))
-        (field "tags" (list string))
+        (Yaml.field "tags" (Yaml.list Yaml.string))
-        (field "category" string)
+        (Yaml.field "category" Yaml.string)
-        (Yaml.maybe (field "image" string))
+        (Yaml.maybe (Yaml.field "image" Yaml.string))
-        (Yaml.maybe (field "modified" string))
+        (Yaml.maybe (Yaml.field "modified" Yaml.string))