Docker blogpost (#139)

* cleanup homepage, add blog link

* show posts on homepage

* add content

* position relative for the anchor

* harders

* footer

* more cleanup

Author: joshuanianji

app/Route/Blog.elm

@@ -8,23 +8,15 @@ module Route.Blog exposing (Model, Msg, route, Data, ActionData)
 
 import Article
 import BackendTask exposing (BackendTask)
-import Colours
 import Css exposing (..)
-import Date exposing (Date)
-import Effect
-import ErrorPage
 import FatalError exposing (FatalError)
 import Head
 import Head.Seo as Seo
-import Html as HtmlOriginal
-import Html.Styled as Html exposing (Html, styled)
-import Html.Styled.Attributes exposing (css, fromUnstyled)
+import Html.Styled as Html exposing (Html)
+import Html.Styled.Attributes exposing (css)
 import Pages.Url
-import PagesMsg
 import Route exposing (Route)
 import RouteBuilder exposing (App, StatelessRoute)
-import Server.Request
-import Server.Response
 import Shared
 import UrlPath
 import Util
@@ -55,7 +47,7 @@ route =
 
 
 type alias Data =
-    List ( Route, Article.ArticleMetadata )
+    List ( Route, Article.Metadata )
 
 
 type alias ActionData =
@@ -122,57 +114,5 @@ content articles =
                 , property "gap" "1em"
                 ]
             ]
-          <|
-            List.map viewBlogPost articles
+            (List.map Article.view articles)
         ]
-
-
-viewBlogPost : ( Route, Article.ArticleMetadata ) -> Html msg
-viewBlogPost ( route_, metadata ) =
-    Html.div
-        [ css
-            [ Util.flexDirection Util.Column
-            , width (pct 100)
-            , padding (em 1.5)
-            , border3 (px 1) solid (Colours.toCss Colours.gray)
-            , borderRadius (em 0.5)
-            , hover
-                [ borderColor (Colours.toCss Colours.black) ]
-            , property "gap" "0.5em"
-            ]
-        ]
-        [ Route.toLink (blogPostTitle metadata) route_
-        , blogDate metadata.published
-        , blogDescription metadata.description
-        ]
-
-
-blogPostTitle : Article.ArticleMetadata -> List (HtmlOriginal.Attribute msg) -> Html msg
-blogPostTitle metadata attrs =
-    Html.a
-        ([ css
-            [ fontSize (em 1.25)
-            , fontWeight bold
-            , textDecoration none
-            , color (Colours.toCss Colours.black)
-            , hover
-                [ color (Colours.toCss Colours.themeBlue) ]
-            ]
-         ]
-            ++ List.map fromUnstyled attrs
-        )
-        [ Html.text metadata.title ]
-
-
-blogDate : Date -> Html msg
-blogDate date =
-    Html.p
-        [ css
-            [ fontSize (em 0.75) ]
-        ]
-        [ Html.text <| Date.format "MMMM d, yyyy" date ]
-
-
-blogDescription : String -> Html msg
-blogDescription description =
-    Html.p [] [ Html.text description ]

app/Route/Blog/Slug_.elm

@@ -1,6 +1,6 @@
 port module Route.Blog.Slug_ exposing (ActionData, Data, Model, Msg, route)
 
-import Article exposing (ArticleMetadata)
+import Article exposing (Metadata)
 import BackendTask exposing (BackendTask)
 import Css exposing (..)
 import Date exposing (Date)
@@ -60,7 +60,7 @@ pages =
 
 
 type alias Data =
-    { metadata : ArticleMetadata
+    { metadata : Metadata
     , body : List Markdown.Block.Block
     }
 

app/Route/Index.elm

@@ -1,5 +1,6 @@
 module Route.Index exposing (ActionData, Data, Model, Msg, footer, route)
 
+import Article
 import BackendTask exposing (BackendTask)
 import BackendTask.File
 import Colours
@@ -9,9 +10,8 @@ import FatalError exposing (FatalError)
 import FeatherIcons
 import Head
 import Head.Seo as Seo
-import Html.Styled as Html exposing (Attribute, Html, styled)
-import Html.Styled.Attributes exposing (css, media)
-import Html.Styled.Events exposing (onClick)
+import Html.Styled as Html exposing (Html)
+import Html.Styled.Attributes exposing (css)
 import Icon
 import Icosahedron
 import Pages.Url
@@ -40,6 +40,12 @@ type alias RouteParams =
 
 
 type alias Data =
+    { projects : ProjectData
+    , blogPosts : BlogData
+    }
+
+
+type alias ProjectData =
     { -- top 3 "pinned" projects
       pinnedProjects : List Project
 
@@ -48,6 +54,10 @@ type alias Data =
     }
 
 
+type alias BlogData =
+    List ( Route.Route, Article.Metadata )
+
+
 type alias ActionData =
     {}
 
@@ -110,6 +120,13 @@ subscriptions routeParams path shared model =
 
 data : BackendTask FatalError Data
 data =
+    BackendTask.succeed Data
+        |> BackendTask.andMap getProjects
+        |> BackendTask.andMap getBlogPosts
+
+
+getProjects : BackendTask FatalError ProjectData
+getProjects =
     BackendTask.File.rawFile "projects.yml"
         |> BackendTask.allowFatal
         |> BackendTask.andThen Project.getProjects
@@ -118,6 +135,13 @@ data =
             (\data_ -> { pinnedProjects = data_.featured, homeProjects = data_.home })
 
 
+getBlogPosts : BackendTask FatalError BlogData
+getBlogPosts =
+    Article.allMetadata
+        |> BackendTask.allowFatal
+        |> BackendTask.map (List.take 3)
+
+
 head :
     App Data ActionData RouteParams
     -> List Head.Tag
@@ -194,10 +218,8 @@ view app shared model =
                         , property "gap" "4em"
                         ]
                     ]
-                    [ about
-                    , projects app.data
-
-                    -- , blog
+                    [ blog app.data.blogPosts
+                    , projects app.data.projects
                     , footer
                     ]
                 ]
@@ -236,7 +258,7 @@ jumbotron =
                 , fontSize (px 25)
                 ]
             ]
-            [ Html.text "Welcome to my website! I am a CS Student at the University of Alberta. I enjoy making webapps, primarily with React and Elm, and I'm also a big Docker + DevOps fan." ]
+            [ Html.text "Welcome to my website! I'm a software engineer currently at InEight. I enjoy making webapps, primarily with React and Elm, and I'm also a big Docker + DevOps fan. I hope you enjoy your time here!" ]
         , jumbotronNavbar
         , Icon.view
             [ css [ displayFlex, flexDirection column, alignItems center ] ]
@@ -290,10 +312,8 @@ jumbotronNavbar : Html msg
 jumbotronNavbar =
     let
         navItems =
-            [ ( "About", "#about", False )
+            [ ( "Blog", "#blog", False )
             , ( "Projects", "#projects", False )
-
-            -- , ( "Blog", "#blog", False )
             , ( "Resume", "https://joshuaji.com/resume/Joshua%20Ji%20Resume.pdf", True )
             ]
     in
@@ -341,47 +361,49 @@ icosahedron model =
 
 
 
----- ABOUT
+---- BLOG
 
 
-about : Html msg
-about =
-    let
-        textBlock =
-            styled Html.p
-                [ fontSize (em 1.3) ]
-    in
+blog : BlogData -> Html msg
+blog data_ =
     Html.div
         [ css
             [ Util.flexDirection Util.Column
             , property "gap" "2em"
             ]
         ]
-        [ Util.linkedHeader "about" "About"
-        , textBlock [] [ Html.text "I started off with HTML, CSS and Javascript: making blogs, web apps, or anything that seemed cool to me." ]
-        , textBlock []
-            [ Html.text "Currently, I use "
-            , Util.textLink "https://elm-lang.org/" "Elm"
-            , Html.text " and Typescript for most of my projects, and I'm learning Haskell, Purescript and Rust on my free time."
+        [ Util.linkedHeader "blog" "Blog"
+        , Html.h2 [] [ Html.text "📅 Recent Posts" ]
+        , recentPosts data_
+        , Html.div
+            [ css
+                [ Util.flexDirection Util.Row
+                , alignItems center
+                , fontSize (em 1.25)
+                ]
             ]
-        , textBlock []
-            [ Html.text "I've recently been taking a deep dive into DevOps. I've recently interned at "
-            , Util.textLink "https://www.nanosticsdx.com/" "Nanostics"
-            , Html.text " where I worked on deploying and maintaining a ML model on Azure, as well as creating a webapp interface for it."
+            [ Util.textRouteLink Route.Blog "All posts"
+            , Icon.view [] { icon = FeatherIcons.chevronRight, strokeWidth = 2, size = 20, msg = Nothing }
             ]
-        , textBlock []
-            [ Html.text "In my free time, I like to play volleyball and walk my dog. I always try to find time to read, check me out on "
-            , Util.textLink "https://hardcover.app/@OshuaJay" "Hardcover"
-            , Html.text "!"
+        ]
+
+
+recentPosts : BlogData -> Html msg
+recentPosts data_ =
+    Html.div
+        [ css
+            [ Util.flexDirection Util.Column
+            , property "gap" "1em"
             ]
         ]
+        (List.map Article.view data_)
 
 
 
 ---- PROJECTS
 
 
-projects : Data -> Html msg
+projects : ProjectData -> Html msg
 projects data_ =
     Html.div
         [ css
@@ -399,7 +421,7 @@ projects data_ =
                 , fontSize (em 1.25)
                 ]
             ]
-            [ Util.textRouteLink Route.AllProjects "See more projects"
+            [ Util.textRouteLink Route.AllProjects "More projects"
             , Icon.view [] { icon = FeatherIcons.chevronRight, strokeWidth = 2, size = 20, msg = Nothing }
             ]
 
@@ -419,38 +441,6 @@ featuredProjects projs =
         (List.map Project.viewFeatured projs)
 
 
-homeProjects : List Project -> Html msg
-homeProjects projs =
-    Html.div
-        [ css
-            [ Util.flexDirection Util.Column
-            , alignItems center
-            , justifyContent center
-            , property "gap" "0.75em"
-            ]
-        ]
-        (List.map Project.view projs)
-
-
-
----- BLOG
-
-
-blog : Html msg
-blog =
-    Html.div
-        [ css
-            [ Util.flexDirection Util.Column
-            , property "gap" "2em"
-            ]
-        ]
-        [ Util.linkedHeader "blog" "Blog"
-        , Html.h2 [] [ Html.text "Work in progress..." ]
-
-        -- , Html.h2 [] [ Html.text "📅 Recent Posts" ]
-        ]
-
-
 
 ---- FOOTER
 

app/Shared.elm

@@ -5,15 +5,16 @@ import Colours
 import Css exposing (..)
 import Effect exposing (Effect)
 import FatalError exposing (FatalError)
+import FeatherIcons
 import Html
 import Html.Styled
 import Html.Styled.Attributes exposing (css)
+import Icon
 import Icosahedron
 import Pages.Flags
 import Pages.PageUrl exposing (PageUrl)
 import Route exposing (Route)
 import SharedTemplate exposing (SharedTemplate)
-import Url
 import UrlPath exposing (UrlPath)
 import Util
 import View exposing (View)
@@ -131,6 +132,7 @@ withNavbarTemplate : Model -> (Msg -> msg) -> List (Html.Styled.Html msg) -> Lis
 withNavbarTemplate model toMsg content =
     [ Html.Styled.map toMsg (navbar model)
     , Html.Styled.main_ [] content
+    , Html.Styled.map toMsg footer
     ]
 
 
@@ -161,4 +163,32 @@ navbar model =
         , Html.Styled.li
             []
             [ Util.textRouteLink Route.AllProjects "Projects" ]
+        , Html.Styled.li
+            []
+            [ Util.textRouteLink Route.Blog "Blog" ]
+        ]
+
+
+footer : Html.Styled.Html Msg
+footer =
+    Html.Styled.div
+        [ css
+            [ Util.flexDirection Util.Row
+            , property "gap" "0.5em"
+            , margin2 (em 2.5) (em 2)
+            ]
+        ]
+        [ Html.Styled.p
+            [ css [ flex (int 1) ] ]
+            [ Html.Styled.text "© 2025 Joshua Ji"
+            ]
+        , Html.Styled.a
+            [ Html.Styled.Attributes.href "https://github.com/joshuanianji/" ]
+            [ Icon.view []
+                { icon = FeatherIcons.github
+                , strokeWidth = 2
+                , size = 16
+                , msg = Nothing
+                }
+            ]
         ]