feat: added two articles

frontend/src/Pages/Blog/Quacksmashing.elm

@@ -0,0 +1,195 @@
+module Pages.Blog.Quacksmashing exposing (Model, Msg, page)
+
+import Config.Data.Identity exposing (pageNames)
+import Config.Helpers.CardFormat
+    exposing
+        ( cardContentSpacing
+        , cardFormatter
+        , cardMaker
+        , cardSubTitleMaker
+        , cardTitleMaker
+        , desktopCardMaker
+        , desktopImageBoxSize
+        , desktopImageSize
+        , fieldSpacer
+        , mobileCardMaker
+        , mobileImageBoxSize
+        , mobileImageSize
+        , topLevelBox
+        )
+import Config.Helpers.Format exposing (..)
+import Config.Helpers.Header
+    exposing
+        ( Header
+        , headerMaker
+        )
+import Config.Helpers.Markdown exposing (..)
+import Config.Helpers.References exposing (makeReference)
+import Config.Helpers.Response
+    exposing
+        ( pageList
+        , topLevelContainer
+        )
+import Config.Helpers.StrengthBar
+    exposing
+        ( barMaker
+        , barPadding
+        )
+import Config.Helpers.ToolTip exposing (..)
+import Config.Helpers.Viewport exposing (resetViewport)
+import Config.Pages.Blog.Records.QuackSmashing exposing (articleQuackSmashing)
+import Config.Pages.Blog.Types exposing (BlogArticle)
+import Config.Pages.Contact.Types exposing (..)
+import Config.Pages.Interviews.Types exposing (..)
+import Config.Pages.Products.Types exposing (..)
+import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Transitions
+    exposing
+        ( hoverFontDarkOrange
+        , transitionStyleFast
+        , transitionStyleSlow
+        )
+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
+import Html.Attributes as H exposing (style)
+import Layouts
+import Page exposing (Page)
+import Route exposing (Route)
+import Shared exposing (..)
+import View exposing (View)
+
+
+page : Shared.Model -> Route () -> Page Model Msg
+page shared route =
+    Page.new
+        { init = init
+        , update = update
+        , subscriptions = subscriptions
+        , view = view shared
+        }
+        |> Page.withLayout toLayout
+
+
+toLayout : Model -> Layouts.Layout Msg
+toLayout model =
+    Layouts.Navbar {}
+
+
+
+-- INIT
+
+
+type alias Model =
+    {}
+
+
+init : () -> ( Model, Effect Msg )
+init () =
+    ( {}
+    , Effect.none
+    )
+
+
+
+-- UPDATE
+
+
+type Msg
+    = NoOp
+
+
+update : Msg -> Model -> ( Model, Effect Msg )
+update msg model =
+    case msg of
+        NoOp ->
+            ( model
+            , Effect.none
+            )
+
+
+
+-- SUBSCRIPTIONS
+
+
+subscriptions : Model -> Sub Msg
+subscriptions model =
+    Sub.none
+
+
+
+-- VIEW
+
+
+view : Shared.Model -> Model -> View Msg
+view shared model =
+    { title = pageNames.pageHyperBlog ++ " (quackSmashing)"
+    , attributes = []
+    , element = articleContainer shared.device
+    }
+
+
+articleContainer : Device -> Element msg
+articleContainer device =
+    topLevelContainer (articleList device)
+
+
+articleList : Device -> Element msg
+articleList device =
+    column
+        (case ( device.class, device.orientation ) of
+            _ ->
+                pageList
+        )
+    <|
+        List.concat
+            [ (case ( device.class, device.orientation ) of
+                _ ->
+                    List.map articleMaker
+              )
+                [ articleQuackSmashing ]
+            ]
+
+
+articleMaker : BlogArticle -> Element msg
+articleMaker article =
+    column
+        topLevelBox
+        [ cardMaker
+            [ cardTitleMaker (String.toUpper articleQuackSmashing.articleName)
+            , cardFormatter
+                [ cardContentSpacing
+                    [ column
+                        fieldSpacer
+                        [ cardSubTitleMaker
+                            [ articleImage articleQuackSmashing.articleImage
+                            , renderDeviceMarkdown articleQuackSmashing.articleBody
+                            , articleReferences article
+                            ]
+                        ]
+                    ]
+                ]
+            ]
+        ]
+
+
+articleReferences : BlogArticle -> Element msg
+articleReferences article =
+    column
+        [ width fill
+        , height fill
+        , paddingEach
+            { top = 10
+            , right = 0
+            , bottom = 0
+            , left = 0
+            }
+        ]
+        [ column [ width fill, F.size 15, spacing 10 ] <|
+            List.map2 (\x y -> makeReference x y)
+                article.articleReferences
+                (List.range 1 (List.length article.articleReferences))
+        ]