feat: added article

frontend/src/Pages/Blog.elm

@@ -17,25 +17,37 @@ import Config.Helpers.CardFormat
         , topLevelBox
         , underConstructionMaker
         )
+import Config.Helpers.Converters
+    exposing
+        ( formatName
+        , wordCount
+        )
+import Config.Helpers.Format
+    exposing
+        ( paragraphFontSize
+        , paragraphSpacing
+        )
+import Config.Helpers.Header exposing (..)
 import Config.Helpers.Response
     exposing
         ( pageList
         , topLevelContainer
         )
 import Config.Helpers.Viewport exposing (resetViewport)
-import Config.Helpers.Header exposing (..)
-import Config.Helpers.Header
-    exposing
-        ( Header
-        , headerMaker
-        )
+import Config.Pages.Blog.Records.SeedOils exposing (articleSeedOils)
+import Config.Pages.Blog.Types exposing (..)
 import Config.Style.Colour as T exposing (..)
 import Config.Style.Icons.Icons exposing (construction)
 import Effect exposing (Effect)
 import Element as E exposing (..)
+import Element.Background as B
+import Element.Border as D
+import Element.Font as F
+import Html.Attributes as H exposing (style)
 import Layouts
 import Page exposing (Page)
 import Route exposing (Route)
+import Route.Path as Path
 import Shared exposing (..)
 import View exposing (View)
 
@@ -107,31 +119,163 @@ view : Shared.Model -> Model -> View Msg
 view shared model =
     { title = pageNames.pageHyperBlog
     , attributes = []
-    , element = hyperBlogContainer shared.device
+    , element = blogContainer shared.device
     }
 
 
-hyperBlogContainer : Device -> Element msg
-hyperBlogContainer device =
-    topLevelContainer (hyperBlogList device)
+blogContainer : Device -> Element msg
+blogContainer device =
+    topLevelContainer (blogList device)
 
 
-hyperBlogList : Device -> Element msg
-hyperBlogList device =
-    column pageList <|
+blogList : Device -> Element msg
+blogList device =
+    column
+        (case ( device.class, device.orientation ) of
+            _ ->
+                pageList
+        )
+    <|
         List.concat
-            (case ( device.class, device.orientation ) of
+            [ List.map headerMaker
+                [ blogHeader ]
+            , (case ( device.class, device.orientation ) of
+                ( Phone, Portrait ) ->
+                    List.map mobileBlogMaker
+
+                ( Tablet, Portrait ) ->
+                    List.map mobileBlogMaker
+
                 _ ->
-                    [ [ underConstructionMaker (String.toUpper pageNames.pageHyperBlog) ] ]
-            )
+                    List.map desktopBlogMaker
+              )
+                [ articleSeedOils ]
+            ]
 
 
-hyperBlogHeader : Header
-hyperBlogHeader =
+blogHeader : Header
+blogHeader =
     let
         name =
             "Blog"
     in
     { headerTitle = String.toUpper name
-    , headerBody = "fasdklfjasdlk;fjasdl;fjasdfl;kasjdfl;askdja;lsdkjas;ldfj"
+    , headerBody = "This page features blog articles written by me, along with contributions from guest authors, covering topics primarily related to nutrition science, health science, and debate."
     }
+
+
+desktopBlogMaker : BlogArticle -> Element msg
+desktopBlogMaker article =
+    row
+        topLevelBox
+        [ desktopCardMaker desktopImageBoxSize desktopImageSize (articleImage article) article.articleLink
+        , cardMaker
+            [ cardTitleMaker article.articleName
+            , cardFormatter
+                [ cardContentSpacing
+                    [ column
+                        fieldSpacer
+                        [ seedOilMaker article ]
+                    ]
+                ]
+            ]
+        ]
+
+
+mobileBlogMaker : BlogArticle -> Element msg
+mobileBlogMaker article =
+    row
+        topLevelBox
+        [ column [] []
+        , cardMaker
+            [ cardTitleMaker article.articleName
+            , cardFormatter
+                [ cardContentSpacing
+                    [ column
+                        fieldSpacer
+                        [ row [ width fill, spacing 10 ]
+                            [ mobileCardMaker mobileImageBoxSize mobileImageSize (articleImage article) article.articleLink
+                            , column
+                                [ width fill ]
+                                [ seedOilMaker article ]
+                            ]
+                        ]
+                    ]
+                ]
+            ]
+        ]
+
+
+articleImage :
+    BlogArticle
+    ->
+        { src : String
+        , description : String
+        }
+articleImage article =
+    { src = "blog/" ++ article.articleImage ++ ".png"
+    , description = article.articleName
+    }
+
+
+seedOilMaker : BlogArticle -> Element msg
+seedOilMaker article =
+    column
+        [ E.width fill
+        , centerX
+        ]
+        [ column [ width fill ]
+            (seedOilRows article
+                ++ [ row []
+                        [ paragraph
+                            [ F.color colourTheme.textLightGrey
+                            , paragraphSpacing
+                            , paragraphFontSize
+                            , spacing 3
+                            , F.regular
+                            , F.alignLeft
+                            , F.size 16
+                            , paddingEach
+                                { top = 8
+                                , bottom = 0
+                                , left = 0
+                                , right = 0
+                                }
+                            ]
+                            [ text article.articleDescription ]
+                        ]
+                   ]
+            )
+        ]
+
+
+infoRow : String -> String -> Element msg
+infoRow label value =
+    row [ width fill ]
+        [ el [ width <| px 105 ] <|
+            paragraph
+                [ F.color colourTheme.textLightOrange
+                , paragraphSpacing
+                , paragraphFontSize
+                , F.bold
+                , F.size 18
+                , E.width fill
+                ]
+                [ text label ]
+        , el [ width fill ] <|
+            paragraph
+                [ F.color colourTheme.textLightGrey
+                , F.regular
+                , paragraphFontSize
+                , width fill
+                ]
+                [ text value ]
+        ]
+
+
+seedOilRows : BlogArticle -> List (Element msg)
+seedOilRows article =
+    [ infoRow "Author:" article.articleAuthor
+    , infoRow "Published:" article.articlePublished
+    , infoRow "Word Count:" (String.fromInt (wordCount article.articleBody))
+    ]

frontend/src/Pages/Blog/Seedoils.elm

@@ -124,7 +124,7 @@ subscriptions model =
 
 view : Shared.Model -> Model -> View Msg
 view shared model =
-    { title = pageNames.pageContact
+    { title = pageNames.pageHyperBlog ++ "(seedOils)"
     , attributes = []
     , element = articleContainer shared.device
     }