Blog (#83)

* Parse blog contents

* update pnpm action setup

* add blog header and `highlight.js`

* update pnpm lock

* update blog post

* Update some blog CSS, make markdown code `fontSize 0.75em`

.github/workflows/deploy.yml

@@ -27,7 +27,7 @@ jobs:
     - name: Checkout 
       uses: actions/checkout@v4
 
-    - uses: pnpm/action-setup@v2
+    - uses: pnpm/action-setup@v3
       with:
         version: 8
 

app/Route/Blog.elm

@@ -0,0 +1,114 @@
+module Route.Blog exposing (Model, Msg, route, Data, ActionData)
+
+{-|
+
+@docs Model, Msg, RouteParams, route, Data, ActionData
+
+-}
+
+import Article
+import BackendTask exposing (BackendTask)
+import Css exposing (..)
+import Effect
+import ErrorPage
+import FatalError exposing (FatalError)
+import Head
+import Head.Seo as Seo
+import Html.Styled as Html exposing (Attribute, Html, styled)
+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 View exposing (View)
+
+
+type alias Msg =
+    ()
+
+
+type alias RouteParams =
+    {}
+
+
+type alias Model =
+    {}
+
+
+route : StatelessRoute RouteParams Data ActionData
+route =
+    RouteBuilder.single
+        { head = head
+        , data = data
+        }
+        |> RouteBuilder.buildNoState
+            { view = view
+            }
+
+
+type alias Data =
+    List ( Route, Article.ArticleMetadata )
+
+
+type alias ActionData =
+    {}
+
+
+data : BackendTask FatalError Data
+data =
+    Article.allMetadata
+        |> BackendTask.allowFatal
+
+
+head : App Data ActionData RouteParams -> List Head.Tag
+head app =
+    Seo.summary
+        { canonicalUrlOverride = Nothing
+        , siteName = "joshuas-blog"
+        , image =
+            { url = [ "images", "icon-png.png" ] |> UrlPath.join |> Pages.Url.fromPath
+            , alt = "elm-pages logo"
+            , dimensions = Nothing
+            , mimeType = Nothing
+            }
+        , description = "Articles by Joshua Ji"
+        , locale = Nothing
+        , title = "Joshua's Blog"
+        }
+        |> Seo.website
+
+
+view :
+    App Data ActionData {}
+    -> Shared.Model
+    -> View msg
+view app shared =
+    { title = "Blog | Joshua Ji"
+    , body = [ content ]
+    }
+
+
+content : Html msg
+content =
+    Html.div
+        [ css
+            [ maxWidth (px 900)
+            , margin2 zero auto
+            , displayFlex
+            , flexDirection column
+            , property "gap" "4em"
+            ]
+        ]
+        [ Html.h1
+            [ css
+                [ fontSize (px 48)
+                , fontFamilies [ qt "Playfair Display SC" ]
+                , margin2 (em 1) zero
+                ]
+            ]
+            [ Html.text "Blog" ]
+        ]

app/Route/Blog/Slug_.elm

@@ -1,10 +1,17 @@
 module Route.Blog.Slug_ exposing (ActionData, Data, Model, Msg, route)
 
+import Article exposing (ArticleMetadata)
 import BackendTask exposing (BackendTask)
+import Css exposing (..)
 import FatalError exposing (FatalError)
 import Head
 import Head.Seo as Seo
-import Html.Styled as Html
+import Html.Styled as Html exposing (Attribute, Html, styled)
+import Html.Styled.Attributes exposing (css)
+import Markdown.Block
+import Markdown.Renderer
+import MarkdownCodec
+import MarkdownRenderer
 import Pages.Url
 import PagesMsg exposing (PagesMsg)
 import RouteBuilder exposing (App, StatelessRoute)
@@ -36,13 +43,18 @@ route =
 
 pages : BackendTask FatalError (List RouteParams)
 pages =
-    BackendTask.succeed
-        [ { slug = "hello" }
-        ]
+    Article.blogPostsGlob
+        |> BackendTask.map
+            (List.map
+                (\globData ->
+                    { slug = globData.slug }
+                )
+            )
 
 
 type alias Data =
-    { something : String
+    { metadata : ArticleMetadata
+    , body : List Markdown.Block.Block
     }
 
 
@@ -52,8 +64,10 @@ type alias ActionData =
 
 data : RouteParams -> BackendTask FatalError Data
 data routeParams =
-    BackendTask.map Data
-        (BackendTask.succeed "Hi")
+    MarkdownCodec.withFrontmatter Data
+        Article.frontmatterDecoder
+        MarkdownRenderer.renderer
+        ("blog/" ++ routeParams.slug ++ ".md")
 
 
 head :
@@ -62,16 +76,16 @@ head :
 head app =
     Seo.summary
         { canonicalUrlOverride = Nothing
-        , siteName = "elm-pages"
+        , siteName = "joshuas-blog"
         , image =
             { url = Pages.Url.external "TODO"
             , alt = "elm-pages logo"
             , dimensions = Nothing
             , mimeType = Nothing
             }
-        , description = "TODO"
+        , description = app.data.metadata.description
         , locale = Nothing
-        , title = "TODO title" -- metadata.title -- TODO
+        , title = app.data.metadata.title
         }
         |> Seo.website
 
@@ -81,6 +95,36 @@ view :
     -> Shared.Model
     -> View (PagesMsg Msg)
 view app sharedModel =
-    { title = "Placeholder - Blog.Slug_"
-    , body = [ Html.text "You're on the page Blog.Slug_" ]
+    { title = app.data.metadata.title
+    , body = [ content app ]
     }
+
+
+content : App Data ActionData RouteParams -> Html msg
+content app =
+    Html.div
+        [ css
+            [ maxWidth (px 900)
+            , margin2 zero auto
+            , displayFlex
+            , flexDirection column
+            , padding (em 1)
+            , property "gap" "1em"
+            ]
+        ]
+        [ Html.h1
+            [ css
+                [ fontSize (px 48)
+                , fontFamilies [ qt "Playfair Display SC" ]
+                , margin2 (em 1) zero
+                ]
+            ]
+            [ Html.text app.data.metadata.title ]
+        , app.data.body
+            |> Markdown.Renderer.render MarkdownRenderer.renderer
+            |> Result.withDefault []
+            |> Html.div
+                [ css
+                    [ fontSize (px 18) ]
+                ]
+        ]

blog/hello-world.md

@@ -0,0 +1,13 @@
+---
+author: Joshua Ji
+title: Hello World!
+description: Testing my blog
+draft: false
+published: "2024-03-29"
+---
+
+Hello world! This is my first blog post.
+
+```python
+print("Hello World!")
+```

elm.json

@@ -29,6 +29,7 @@
             "elm/url": "1.0.0",
             "elm/virtual-dom": "1.0.3",
             "elm-community/dict-extra": "2.4.0",
+            "elm-community/json-extra": "4.3.0",
             "elm-community/list-extra": "8.7.0",
             "elm-community/result-extra": "2.4.0",
             "feathericons/elm-feather": "1.5.0",
@@ -43,6 +44,7 @@
             "mdgriffith/elm-codegen": "4.2.1",
             "miniBill/elm-codec": "2.1.0",
             "noahzgordon/elm-color-extra": "1.0.2",
+            "pablohirafuji/elm-syntax-highlight": "3.5.0",
             "robinheghan/fnv1a": "1.0.0",
             "rtfeldman/elm-css": "18.0.0",
             "rtfeldman/elm-iso8601-date-strings": "1.1.4",

index.ts

@@ -1,3 +1,10 @@
+import hljs from 'highlight.js/lib/core';
+import javascript from 'highlight.js/lib/languages/javascript';
+import python from 'highlight.js/lib/languages/python';
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('python', python);
+import 'highlight.js/styles/atom-one-dark.css';
+
 type ElmPagesInit = {
     load: (elmLoaded: Promise<unknown>) => Promise<void>;
     flags: unknown;
@@ -31,6 +38,9 @@ const config: ElmPagesInit = {
             })
             console.log('Added event listener for mousemove homepage')
         }
+
+        console.log('Highlighting code blocks')
+        hljs.highlightAll();
     },
     flags: function () {
         return "You can decode this in Shared.elm using Json.Decode.string!";

package.json

@@ -13,8 +13,11 @@
     "elm-pages": "3.0.12",
     "elm-review": "2.11.1",
     "elm-tooling": "1.15.1",
-    "lamdera": "0.19.1-1.2.1-1",
     "http-server": "14.1.1",
+    "lamdera": "0.19.1-1.2.1-1",
     "vite": "5.2.6"
+  },
+  "dependencies": {
+    "highlight.js": "11.9.0"
   }
 }