diff --git a/frontend/src/Config/Helpers/CardFormat.elm b/frontend/src/Config/Helpers/CardFormat.elm index 581ca4a..fd9db9f 100755 --- a/frontend/src/Config/Helpers/CardFormat.elm +++ b/frontend/src/Config/Helpers/CardFormat.elm @@ -168,6 +168,8 @@ cardImageMaker size1 size2 image urlLink = || urlLink == Path.toString Path.Blog || urlLink + == Path.toString Path.Blog_Seedoils + || urlLink == Path.toString Path.Interviews || urlLink == Path.toString Path.Nutridex diff --git a/frontend/src/Config/Helpers/Converters.elm b/frontend/src/Config/Helpers/Converters.elm index 86f2b85..6791f93 100755 --- a/frontend/src/Config/Helpers/Converters.elm +++ b/frontend/src/Config/Helpers/Converters.elm @@ -19,3 +19,10 @@ formatSocial name = |> String.replace "https://www.threads.net/@" "@" |> String.replace "https://bsky.app/profile/" "@" |> String.replace "https://www.instagram.com/" "@" + + +wordCount : String -> Int +wordCount text = + text + |> String.words + |> List.length diff --git a/frontend/src/Config/Helpers/Markdown.elm b/frontend/src/Config/Helpers/Markdown.elm index 8d052e5..82a8427 100644 --- a/frontend/src/Config/Helpers/Markdown.elm +++ b/frontend/src/Config/Helpers/Markdown.elm @@ -126,14 +126,23 @@ elmUiRenderer = \image -> case image.title of Just title -> - el [] <| + el + [ width fill ] + <| column - [ width fill - , E.centerX + [ E.centerX + , E.centerY + , width fill + , E.paddingEach + { top = 0 + , bottom = 10 + , left = 10 + , right = 10 + } ] [ E.image [ E.centerX - , width <| px 600 + , width (fill |> maximum 600) ] { src = image.src , description = image.alt @@ -149,7 +158,7 @@ elmUiRenderer = , E.centerY , width fill , E.paddingEach - { top = 0 + { top = 3 , bottom = 10 , left = 10 , right = 10 diff --git a/frontend/src/Config/Pages/Blog/Records/SeedOils.elm b/frontend/src/Config/Pages/Blog/Records/SeedOils.elm index 7bc92a2..bfe3585 100644 --- a/frontend/src/Config/Pages/Blog/Records/SeedOils.elm +++ b/frontend/src/Config/Pages/Blog/Records/SeedOils.elm @@ -1,12 +1,18 @@ module Config.Pages.Blog.Records.SeedOils exposing (..) import Config.Pages.Blog.Types exposing (..) +import Route.Path as Path articleSeedOils : BlogArticle articleSeedOils = { articleName = "A Comprehensive Rebuttal to Seed Oil Sophistry" + , articleDescription = "The article argues that vegetable oils, often criticized in recent years, are not harmful and may even offer health benefits, such as preventing heart disease and type 2 diabetes. It challenges claims based on mechanistic or ecological research, which lack strong evidence linking vegetable oils to chronic diseases. Instead, the article supports their inclusion in a balanced diet, cautioning against overconsumption, and debunking myths based on speculative studies." + , articleLink = Path.toString Path.Blog_Seedoils + , articleAuthor = "Nick Hiebert" + , isNewTabLink = False , articleImage = "seedoils" + , articlePublished = "Oct 31, 2021" , articleBody = """ The popular consciousness has accepted many dietary villains over the course of the last half century, ranging from fat, to protein, to salt, to carbohydrates. More often than not, dietary constituents that have fallen under such scrutiny have been exonerated in time, as more and more scientific data is brought to light. I suspect that there is a growing number of people who are now wrongfully demonizing vegetable oils as well. Both skepticism and generally negative attitudes toward these oils appear to have skyrocketed in recent years, and it can be seen seemingly everywhere. diff --git a/frontend/src/Config/Pages/Blog/Types.elm b/frontend/src/Config/Pages/Blog/Types.elm index eee9629..e1bd4b2 100755 --- a/frontend/src/Config/Pages/Blog/Types.elm +++ b/frontend/src/Config/Pages/Blog/Types.elm @@ -5,4 +5,9 @@ type alias BlogArticle = { articleName : String , articleBody : String , articleImage : String + , articleLink : String + , articleAuthor : String + , isNewTabLink : Bool + , articlePublished : String + , articleDescription : String } diff --git a/frontend/src/Pages/Blog.elm b/frontend/src/Pages/Blog.elm index 5eda38d..6be4c07 100755 --- a/frontend/src/Pages/Blog.elm +++ b/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)) + ] diff --git a/frontend/src/Pages/Blog/Seedoils.elm b/frontend/src/Pages/Blog/Seedoils.elm index a376ab0..caec4d6 100644 --- a/frontend/src/Pages/Blog/Seedoils.elm +++ b/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 }