feat: added the nutridex page

frontend/src/Products/Helpers.elm

@@ -13,6 +13,7 @@ import Element.Events exposing (onClick)
 import Element.Font as F
 import Headers.Types exposing (..)
 import Html.Attributes as H exposing (style)
+import Html.Events exposing (onMouseOver)
 import Interviews.Types exposing (..)
 import Layouts
 import Page exposing (Page)
@@ -47,6 +48,7 @@ nutriDexMaker nutridex =
                             , left = 25
                             , right = 15
                             }
+                       , alignBottom
                        , width fill
                        , F.center
                        , D.roundEach
@@ -68,7 +70,19 @@ nutriDexMaker nutridex =
                                    , F.center
                                    ]
                             )
-                            [ featureList nutridex ]
+                            [ featureList nutridex
+                            , nutriDexTitleMaker
+                            , nutriDexBodyMaker
+                            , nutriDexAdjustments
+                            , column [ spacing 10 ]
+                                [ nutriDexVitamins
+                                , nutriDexFattyAcids
+                                , nutriDexMinerals
+                                , nutriDexAminoAcids
+                                ]
+                            , nutriDexReferenceTitleMaker
+                            , nutriDexReferences nutridex
+                            ]
                         ]
                     ]
                 ]
@@ -80,6 +94,7 @@ makeFeature : Features -> Element msg
 makeFeature features =
     column
         [ E.width fill
+        , alignLeft
         , paddingEach
             { top = 0
             , right = 0
@@ -90,7 +105,7 @@ makeFeature features =
         [ row [ E.width fill ]
             [ column [ E.width fill ]
                 [ paragraph [ F.regular, F.alignLeft ]
-                    [ text ("‣ " ++ features.feature) ]
+                    [ text "‣ ", el [ F.bold, F.color colourTheme.textLightOrange ] (text features.featureTitle), text features.feature ]
                 ]
             ]
         ]
@@ -102,14 +117,18 @@ featureList nutridex =
         [ spacing 8
         , width fill
         , height fill
+        , paddingEach
+            { top = 20
+            , bottom = 0
+            , left = 0
+            , right = 0
+            }
         ]
         [ row
             [ spacing 20
             , width fill
             , height fill
             ]
-            [ column
-                []
             [ column
                 [ spacing 20
                 ]
@@ -149,11 +168,10 @@ featureList nutridex =
                         ]
                         [ newTabLink []
                             { url = "https://the-nutrivore.myshopify.com/cart/31192710807615:1?channel=buy_button"
-                                , label = row [ F.center ] [ text "Purchase!" ]
+                            , label = row [ F.center ] [ text "$19.99" ]
                             }
                         ]
                     ]
-                    ]
                 , column
                     [ centerX ]
                     [ column
@@ -168,7 +186,7 @@ featureList nutridex =
                                     [ centerX
                                     , centerY
                                     ]
-                                    [ text "Cost Efficiency Score!" ]
+                                    [ text "Free Cost Efficiency Score!" ]
                             }
                         ]
                     ]
@@ -179,3 +197,642 @@ featureList nutridex =
                     (List.range 1 (List.length nutridex.nutriDexFeatures))
             ]
         ]
+
+
+nutriDexTitleMaker : Element msg
+nutriDexTitleMaker =
+    column
+        [ width <| px 725
+        , height fill
+        , spacing 20
+        ]
+        [ row
+            [ width fill
+            , centerX
+            , D.widthEach { bottom = 1, top = 0, left = 0, right = 0 }
+            , D.color (rgb255 200 200 200)
+            , paddingEach { top = 40, bottom = 0, left = 0, right = 0 }
+            ]
+            []
+        , paragraph
+            (paragraphBoldFormat
+                ++ [ centerX
+                   , F.size 25
+                   , F.color colourTheme.textLightOrange
+                   , paddingEach
+                        { top = 10
+                        , right = 0
+                        , bottom = 10
+                        , left = 0
+                        }
+                   ]
+            )
+            [ text "Backstory" ]
+        ]
+
+
+linkFormat : List (Attr () msg)
+linkFormat =
+    paragraphFormat
+        ++ [ F.color colourTheme.textLightOrange
+           ]
+
+
+nutriDexBodyMaker : Element msg
+nutriDexBodyMaker =
+    column
+        [ width fill
+        , height fill
+        ]
+        [ column [ spacing 10 ]
+            [ row []
+                [ paragraph
+                    (paragraphFormat
+                        ++ [ F.alignLeft
+                           , width fill
+                           ]
+                    )
+                    [ text "In May 2019, after losing my job, I sought a way to optimize my diet for nutrient density (ND) while keeping costs low. I initially found a resource called "
+                    , newTabLink linkFormat
+                        { url = "https://efficiencyiseverything.com/food/"
+                        , label = text "Efficiency Is Everything"
+                        }
+                    , text ", which ranked foods by nutrition per cost, but I found it too simplistic and lacking nuance, especially since it ranked processed foods like white bread highly, despite their limited health benefits. I wanted a more personalized approach—one that took into account both ND and the cost of foods specific to my region. Inspired by Mat Lalonde's AHS12 talk "
+                    , newTabLink linkFormat
+                        { url = "https://www.youtube.com/watch?v=HwbY12qZcF4"
+                        , label = text "Nutrient Density: Sticking to the Essentials"
+                        }
+                    , text " on nutrient density, I created a rudimentary list of 75 foods and manually assigned them scores based on nutritional content from "
+                    , newTabLink linkFormat
+                        { url = "https://cronometer.com/"
+                        , label = text "Cronometer"
+                        }
+                    , text ", paired with local grocery prices."
+                    ]
+                ]
+            , row []
+                [ paragraph (paragraphFormat ++ [ F.alignLeft, width fill ])
+                    [ text "As I refined the list, I found a community on Reddit called "
+                    , newTabLink linkFormat
+                        { url = "https://www.reddit.com/r/EatCheapAndHealthy/"
+                        , label = text "EatCheapAndHealthy"
+                        }
+                    , text " where I "
+                    , newTabLink linkFormat
+                        { url = "https://www.reddit.com/r/EatCheapAndHealthy/comments/cbmxre/had_no_idea_this_sub_existed_heres_a_nutrient/"
+                        , label = text "shared my spreadsheet"
+                        }
+                    , text ". The overwhelming response encouraged me to expand it further, incorporating more foods, detailed nutritional data, and more accurate ND scores. To improve accuracy, I turned to the USDA’s "
+                    , newTabLink linkFormat
+                        { url = "https://www.ars.usda.gov/northeast-area/beltsville-md-bhnrc/beltsville-human-nutrition-research-center/nutrient-data-laboratory/docs/sr28-download-files/"
+                        , label = text "SR28 database"
+                        }
+                    , text ", which provided granular data for over 700 common foods. I developed a more sophisticated scoring system, assigning points based on how well each food met the daily recommended intake for essential nutrients, then normalizing these scores from 0 to 100."
+                    ]
+                ]
+            , row []
+                [ paragraph
+                    (paragraphFormat
+                        ++ [ F.alignLeft
+                           , width fill
+                           ]
+                    )
+                    [ text "The final ND scores were calculated non-linearly, allowing for a more balanced representation of a food’s nutrient profile rather than allowing one nutrient to dominate the score. For instance, while Brazil nuts are high in selenium, the non-linear formula prevents their score from being artificially inflated by this one nutrient. Ultimately, the system I created allows for a more objective and personalized way to rank foods by both nutrient density and cost, making it a valuable resource for anyone looking to optimize their diet." ]
+                ]
+            ]
+        ]
+
+
+referenceFormat : List (Attr () msg)
+referenceFormat =
+    paragraphFormat
+        ++ [ F.color colourTheme.textLightOrange
+           , F.size 12
+           , alignTop
+           , mouseOver [ F.color colourTheme.textDarkOrange ]
+           , htmlAttribute <| style "transition" "all 0.1s ease-in-out"
+           ]
+
+
+nutriDexAdjustments : Element msg
+nutriDexAdjustments =
+    column
+        [ width fill
+        , height fill
+        ]
+        [ column
+            [ width <| px 725
+            , height fill
+            , spacing 20
+            ]
+            [ row
+                [ width fill
+                , centerX
+                , D.widthEach { bottom = 1, top = 0, left = 0, right = 0 }
+                , D.color (rgb255 200 200 200)
+                , paddingEach { top = 40, bottom = 0, left = 0, right = 0 }
+                ]
+                []
+            , column [ spacing 10 ]
+                [ row
+                    [ centerX
+                    , paddingEach
+                        { top = 10
+                        , right = 0
+                        , bottom = 10
+                        , left = 0
+                        }
+                    ]
+                    [ paragraph
+                        (paragraphBoldFormat
+                            ++ [ F.alignLeft
+                               , width fill
+                               , F.size 18
+                               , F.color colourTheme.textLightOrange
+                               ]
+                        )
+                        [ text "Nutrient Density Score Adjustments" ]
+                    ]
+                , row []
+                    [ paragraph (paragraphFormat ++ [ F.alignLeft, width fill ])
+                        [ text "• "
+                        , text "No adjustments are made to vitamin B1, vitamin B2, vitamin B3, manganese, phosphorus, and potassium, due to their DRIs only representing total daily intake, or due to the nutrient having close to 100% bioavailability. "
+                        , row [ F.regular, F.size 12 ]
+                            [ newTabLink referenceFormat
+                                { url = "https://www.ncbi.nlm.nih.gov/books/NBK114331/"
+                                , label = text "1"
+                                }
+                            , text ", "
+                            , newTabLink referenceFormat
+                                { url = "https://www.ncbi.nlm.nih.gov/books/NBK114322/"
+                                , label = text "2"
+                                }
+                            , text ", "
+                            , newTabLink referenceFormat
+                                { url = "https://www.ncbi.nlm.nih.gov/books/NBK114304/"
+                                , label = text "3"
+                                }
+                            , text ", "
+                            , newTabLink referenceFormat
+                                { url = "https://www.ncbi.nlm.nih.gov/books/NBK56056/"
+                                , label = text "4"
+                                }
+                            , text ", "
+                            , newTabLink referenceFormat
+                                { url = "https://www.nap.edu/read/11537/chapter/39"
+                                , label = text "5"
+                                }
+                            , text ", "
+                            , newTabLink referenceFormat
+                                { url = "https://www.nap.edu/read/11537/chapter/41"
+                                , label = text "6"
+                                }
+                            , text ", "
+                            , newTabLink referenceFormat
+                                { url = "https://www.nap.edu/read/11537/chapter/42"
+                                , label = text "7"
+                                }
+                            ]
+                        ]
+                    ]
+                ]
+            ]
+        ]
+
+
+nutriDexVitamins : Element msg
+nutriDexVitamins =
+    column
+        [ width fill
+        , height fill
+        ]
+        [ column [ spacing 10 ]
+            [ row
+                [ centerX
+                , paddingEach
+                    { top = 10
+                    , right = 0
+                    , bottom = 10
+                    , left = 0
+                    }
+                ]
+                [ paragraph
+                    (paragraphBoldFormat
+                        ++ [ F.alignLeft
+                           , width fill
+                           , F.size 18
+                           , F.color colourTheme.textLightOrange
+                           ]
+                    )
+                    [ text "Vitamins" ]
+                ]
+            , row []
+                [ paragraph (paragraphFormat ++ [ F.alignLeft, width fill ])
+                    [ text "• "
+                    , text "The DRI for vitamin B5 is multiplied by 2 in order to accommodate its average 50% bioavailability from food. "
+                    , row [ F.regular, F.size 12 ]
+                        [ newTabLink referenceFormat
+                            { url = "https://www.ncbi.nlm.nih.gov/books/NBK114311/"
+                            , label = text "8"
+                            }
+                        ]
+                    ]
+                ]
+            , row []
+                [ paragraph (paragraphFormat ++ [ F.alignLeft, width fill ])
+                    [ text "• "
+                    , text "The DRI for plant-derived vitamin B6 is multiplied by 1.74 in order to accommodate the average ~42.5% reduction in bioavailability of pyridoxine glucoside. "
+                    , row [ F.regular, F.size 12 ]
+                        [ newTabLink referenceFormat
+                            { url = "https://www.ncbi.nlm.nih.gov/pubmed/2843032"
+                            , label = text "9"
+                            }
+                        ]
+                    ]
+                ]
+            , row []
+                [ paragraph (paragraphFormat ++ [ F.alignLeft, width fill ])
+                    [ text "• "
+                    , text "The DRI for animal-derived vitamin B6 is multiplied by 1.33 in order to accommodate the average ~25% reduction in bioavailability of as a result of cooking. "
+                    , row [ F.regular, F.size 12 ]
+                        [ newTabLink referenceFormat
+                            { url = "https://pdfs.semanticscholar.org/b844/5e60d87753144ef856e0ae207b551aa75b9c.pdf"
+                            , label = text "10"
+                            }
+                        ]
+                    ]
+                ]
+            , row []
+                [ paragraph (paragraphFormat ++ [ F.alignLeft, width fill ])
+                    [ text "• "
+                    , text "The contribution of vitamin B12 is capped at 1.5mcg in order to account for the average absorption cap of ~1.5mcg per serving in healthy people. "
+                    , row [ F.regular, F.size 12 ]
+                        [ newTabLink referenceFormat
+                            { url = "https://www.ncbi.nlm.nih.gov/pubmed/18606874"
+                            , label = text "11"
+                            }
+                        ]
+                    ]
+                ]
+            , row []
+                [ paragraph (paragraphFormat ++ [ F.alignLeft, width fill ])
+                    [ text "• "
+                    , text "The DRI for folate has been multiplied by 2 in order to accommodate its average 50% bioavailbility from food. "
+                    , row [ F.regular, F.size 12 ]
+                        [ newTabLink referenceFormat
+                            { url = "https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3257685/"
+                            , label = text "12"
+                            }
+                        ]
+                    ]
+                ]
+            , row []
+                [ paragraph (paragraphFormat ++ [ F.alignLeft, width fill ])
+                    [ text "• "
+                    , text "The contribution of plant-derived vitamin A (as retinol activity equivalents) is capped at 900mcg. This is to accommodate the fact that it is unlikely that the body can convert more than the DRI of vitamin A from carotenoids. "
+                    , row [ F.regular, F.size 12 ]
+                        [ newTabLink referenceFormat
+                            { url = "https://www.ncbi.nlm.nih.gov/pmc/articles/PMC2855261/"
+                            , label = text "13"
+                            }
+                        ]
+                    ]
+                ]
+            , row []
+                [ paragraph (paragraphFormat ++ [ F.alignLeft, width fill ])
+                    [ text "• "
+                    , text "The DRI for plant-derived vitamin K, phylloquinone, is multiplied by 10 in order to accommodate its 10% bioavailability from plant foods. "
+                    , row [ F.regular, F.size 12 ]
+                        [ newTabLink referenceFormat
+                            { url = "https://www.ncbi.nlm.nih.gov/pubmed/8813897"
+                            , label = text "14"
+                            }
+                        ]
+                    ]
+                ]
+            , row []
+                [ paragraph (paragraphFormat ++ [ F.alignLeft, width fill ])
+                    [ text "• "
+                    , text "The DRI for vitamin C has been multiplied by 1.25 in order to accommodate its average ~80% bioavailability. "
+                    , row [ F.regular, F.size 12 ]
+                        [ newTabLink referenceFormat
+                            { url = "https://www.ncbi.nlm.nih.gov/pubmed/12134712"
+                            , label = text "15"
+                            }
+                        ]
+                    ]
+                ]
+            , row []
+                [ paragraph (paragraphFormat ++ [ F.alignLeft, width fill ])
+                    [ text "• "
+                    , text "The DRI for vitamin E has been multiplied by 4.65 in order to accommodate its average 21.5% bioavailability. "
+                    , row [ F.regular, F.size 12 ]
+                        [ newTabLink referenceFormat
+                            { url = "https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5745505/"
+                            , label = text "16"
+                            }
+                        ]
+                    ]
+                ]
+            ]
+        ]
+
+
+nutriDexFattyAcids : Element msg
+nutriDexFattyAcids =
+    column
+        [ width fill
+        , height fill
+        ]
+        [ column [ spacing 10 ]
+            [ row
+                [ centerX
+                , paddingEach
+                    { top = 10
+                    , right = 0
+                    , bottom = 10
+                    , left = 0
+                    }
+                ]
+                [ paragraph
+                    (paragraphBoldFormat
+                        ++ [ F.alignLeft
+                           , width fill
+                           , F.size 18
+                           , F.color colourTheme.textLightOrange
+                           ]
+                    )
+                    [ text "Fatty Acids" ]
+                ]
+            , row []
+                [ paragraph (paragraphFormat ++ [ F.alignLeft, width fill ])
+                    [ text "• "
+                    , text "The DRIs for omega-3 and omega-6 have been recalculated to 250mg/day and 500mg/day, respectively. This better reflects our actual physiological requirements for these fatty acids as provided by their pre-elongated, animal-derived varieties. "
+                    , row [ F.regular, F.size 12 ]
+                        [ newTabLink referenceFormat
+                            { url = "https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5946201/"
+                            , label = text "17"
+                            }
+                        , text ", "
+                        , newTabLink referenceFormat
+                            { url = "https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5452278/"
+                            , label = text "18"
+                            }
+                        ]
+                    ]
+                ]
+            , row []
+                [ paragraph (paragraphFormat ++ [ F.alignLeft, width fill ])
+                    [ text "• "
+                    , text "The DRIs for plant-derived omega-3 and omega-6 have been multiplied by 6.66 in order to reflect their maximal ~15% conversion rate. "
+                    , row [ F.regular, F.size 12 ]
+                        [ newTabLink referenceFormat
+                            { url = "https://www.ncbi.nlm.nih.gov/pubmed/12323090"
+                            , label = text "19"
+                            }
+                        ]
+                    ]
+                ]
+            , row []
+                [ paragraph (paragraphFormat ++ [ F.alignLeft, width fill ])
+                    [ text "• "
+                    , text "The contributions of plant-derived omega-3 and omega-6 are capped at 4.4444g before conversion rates are factored, in order to accommodate their conversion rate cap of 2% of calories per day. "
+                    , row [ F.regular, F.size 12 ]
+                        [ newTabLink referenceFormat
+                            { url = "https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3132704/"
+                            , label = text "20"
+                            }
+                        ]
+                    ]
+                ]
+            ]
+        ]
+
+
+nutriDexMinerals : Element msg
+nutriDexMinerals =
+    column
+        [ width fill
+        , height fill
+        ]
+        [ column [ spacing 10 ]
+            [ row
+                [ centerX
+                , paddingEach
+                    { top = 10
+                    , right = 0
+                    , bottom = 10
+                    , left = 0
+                    }
+                ]
+                [ paragraph
+                    (paragraphBoldFormat
+                        ++ [ F.alignLeft
+                           , width fill
+                           , F.size 18
+                           , F.color colourTheme.textLightOrange
+                           ]
+                    )
+                    [ text "Minerals" ]
+                ]
+            , row []
+                [ paragraph (paragraphFormat ++ [ F.alignLeft, width fill ])
+                    [ text "• "
+                    , text "The DRI for calcium has been adjusted dynamically based on the oxalate-to-calcium ratio of each food. "
+                    ]
+                ]
+            , row []
+                [ paragraph (paragraphFormat ++ [ F.alignLeft, width fill ])
+                    [ text "• "
+                    , text "The DRI for plant-derived copper has been multiplied by 2.94 in order to accommodate its average ~34% bioavailability from plant foods. "
+                    , row [ F.regular, F.size 12 ]
+                        [ newTabLink referenceFormat
+                            { url = "https://www.ncbi.nlm.nih.gov/pubmed/8615369"
+                            , label = text "21"
+                            }
+                        ]
+                    ]
+                ]
+            , row []
+                [ paragraph (paragraphFormat ++ [ F.alignLeft, width fill ])
+                    [ text "• "
+                    , text "The DRI for animal-derived copper has been multiplied by 2.43 in order to accommodate its average ~41% bioavailability from animal foods. "
+                    , row [ F.regular, F.size 12 ]
+                        [ newTabLink referenceFormat
+                            { url = "https://www.ncbi.nlm.nih.gov/pubmed/8615369"
+                            , label = text "21"
+                            }
+                        ]
+                    ]
+                ]
+            , row []
+                [ paragraph (paragraphFormat ++ [ F.alignLeft, width fill ])
+                    [ text "• "
+                    , text "The DRI for magnesium has been multiplied by 2.85 in order to accommodate its 35% bioavailability. "
+                    , row [ F.regular, F.size 12 ]
+                        [ newTabLink referenceFormat
+                            { url = "https://www.ncbi.nlm.nih.gov/pubmed/1864954"
+                            , label = text "22"
+                            }
+                        ]
+                    ]
+                ]
+            , row []
+                [ paragraph (paragraphFormat ++ [ F.alignLeft, width fill ])
+                    [ text "• "
+                    , text "The DRI for iron has been adjusted dynamically based on the phytate-to-iron ratio of each food."
+                    ]
+                ]
+            , row []
+                [ paragraph (paragraphFormat ++ [ F.alignLeft, width fill ])
+                    [ text "• "
+                    , text "The DRI for selenium has been multiplied by 1.11 in order to accommodate its 90% bioavailability. "
+                    , row [ F.regular, F.size 12 ]
+                        [ newTabLink referenceFormat
+                            { url = "https://www.ncbi.nlm.nih.gov/pubmed/20200264"
+                            , label = text "23"
+                            }
+                        ]
+                    ]
+                ]
+            , row []
+                [ paragraph (paragraphFormat ++ [ F.alignLeft, width fill ])
+                    [ text "• "
+                    , text "The contribution of zinc is capped at 7mg in order to account for the average absorption cap of 7mg per serving in healthy people. "
+                    , row [ F.regular, F.size 12 ]
+                        [ newTabLink referenceFormat
+                            { url = "https://www.ncbi.nlm.nih.gov/pubmed/10801947"
+                            , label = text "24"
+                            }
+                        ]
+                    ]
+                ]
+            , row []
+                [ paragraph (paragraphFormat ++ [ F.alignLeft, width fill ])
+                    [ text "• "
+                    , text "The DRI for zinc has been adjusted dynamically based on the phytate-to-zinc ratio of each food. "
+                    ]
+                ]
+            ]
+        ]
+
+
+nutriDexAminoAcids : Element msg
+nutriDexAminoAcids =
+    column
+        [ width fill
+        , height fill
+        ]
+        [ column [ spacing 10 ]
+            [ row
+                [ centerX
+                , paddingEach
+                    { top = 10
+                    , right = 0
+                    , bottom = 10
+                    , left = 0
+                    }
+                ]
+                [ paragraph
+                    (paragraphBoldFormat
+                        ++ [ F.alignLeft
+                           , width fill
+                           , F.size 18
+                           , F.color colourTheme.textLightOrange
+                           ]
+                    )
+                    [ text "Amino Acids" ]
+                ]
+            , row []
+                [ paragraph (paragraphFormat ++ [ F.alignLeft, width fill ])
+                    [ text "• "
+                    , text "The DRIs for all essential amino acids from non-animal sources have been multiplied by 1.492 in order to accommodate their average PDCAAS score of .67. "
+                    , row [ F.regular, F.size 12 ]
+                        [ newTabLink referenceFormat
+                            { url = "https://en.wikipedia.org/wiki/Protein_Digestibility_Corrected_Amino_Acid_Score"
+                            , label = text "25"
+                            }
+                        ]
+                    ]
+                ]
+            , row []
+                [ paragraph (paragraphFormat ++ [ F.alignLeft, width fill ])
+                    [ text "• "
+                    , text "All scores reflecting total protein yield of non-animal foods have been multiplied by .67 in order to accommodate the average 67% bioavailability of protein from non-animal sources. "
+                    , row [ F.regular, F.size 12 ]
+                        [ newTabLink referenceFormat
+                            { url = "https://en.wikipedia.org/wiki/Protein_Digestibility_Corrected_Amino_Acid_Score"
+                            , label = text "25"
+                            }
+                        ]
+                    ]
+                ]
+            ]
+        ]
+
+
+nutriDexReferenceTitleMaker : Element msg
+nutriDexReferenceTitleMaker =
+    column
+        [ width <| px 725
+        , height fill
+        , spacing 20
+        ]
+        [ row
+            [ width fill
+            , centerX
+            , D.widthEach { bottom = 1, top = 0, left = 0, right = 0 }
+            , D.color (rgb255 200 200 200)
+            , paddingEach { top = 40, bottom = 0, left = 0, right = 0 }
+            ]
+            []
+        , paragraph
+            (paragraphBoldFormat
+                ++ [ centerX
+                   , F.size 25
+                   , F.color colourTheme.textLightOrange
+                   , paddingEach
+                        { top = 10
+                        , right = 0
+                        , bottom = 10
+                        , left = 0
+                        }
+                   ]
+            )
+            [ text "References" ]
+        ]
+
+
+nutriDexReferences : NutriDex -> Element msg
+nutriDexReferences nutridex =
+    column
+        [ width fill
+        , height fill
+        ]
+        [ column [ width fill, F.size 15, spacing 10 ] <|
+            List.map2 (\x y -> makeReference x y)
+                nutridex.nutriDexReference
+                (List.range 1 (List.length nutridex.nutriDexReference))
+        ]
+
+
+makeReference : References -> Int -> Element msg
+makeReference references index =
+    paragraph
+        [ F.regular
+        , F.alignLeft
+        ]
+        [ row []
+            [ newTabLink
+                [ F.bold
+                , F.color colourTheme.textLightOrange
+                , mouseOver [ F.color colourTheme.textDarkOrange ]
+                , htmlAttribute <| style "transition" "all 0.1s ease-in-out"
+                ]
+                { url = references.link, label = text (String.fromInt index ++ ". ") }
+            , text references.author
+            , text references.title
+            , text references.journal
+            , text references.year
+            ]
+        ]

frontend/src/Products/NutriDex/NutriDex.elm

@@ -1,5 +1,7 @@
 module Products.NutriDex.NutriDex exposing (..)
 
+import Element as E exposing (..)
+import Element.Font as F exposing (..)
 import Products.Types exposing (..)
 
 
@@ -7,35 +9,200 @@ productNutriDex : NutriDex
 productNutriDex =
     { nutriDexTitle = "The NutriDex"
     , nutriDexFeatures =
-        [ { feature = "Nutrient Density Scoring: The essential nutrient yields of over 700 foods are ranked and adjusted for bioavailability, nutrient absorption capacity, and metabolic conversion inefficiencies!"
+        [ { feature = "The essential nutrient yields of over 700 foods are ranked and adjusted for bioavailability, nutrient absorption capacity, and metabolic conversion inefficiencies!"
+          , featureTitle = "Nutrient Density Scoring: "
           }
-        , { feature = "Specialized Nutrition Scoring: Figure out the right foods for you with 30 different nutrition scores that stratify foods by a number of different dietary goals!\n"
+        , { feature = "Specialized Nutrition Scoring: " ++ "Figure out the right foods for you with 30 different nutrition scores that stratify foods by a number of different dietary goals!"
+          , featureTitle = "Specialized Nutrition Scoring: "
           }
-        , { feature = "Custom Nutrition Scoring: Use the included Custom Score tab to help create your own personal nutrition score to plan your own ideal diet!"
+        , { feature = "Use the included Custom Score tab to help create your own personal nutrition score to plan your own ideal diet!"
+          , featureTitle = "Custom Nutrition Scoring: "
           }
-        , { feature = "Diverse Nutrition Data: Custom-tailor your diet with in-depth nutrition data, including oxalates, phytates, glycemic index, glycemic load, satiety, FODMAPs, PCDAAS, price, shelf life, and over 500 polyphenolic compounds!"
+        , { feature = "Custom-tailor your diet with in-depth nutrition data, including oxalates, phytates, glycemic index, glycemic load, satiety, FODMAPs, PCDAAS, price, shelf life, and over 500 polyphenolic compounds!"
+          , featureTitle = "Diverse Nutrition Data: "
           }
-        , { feature = "Hazard Profiles: Avoid potential hazards from certain nutrients and other compounds with the included hazard profile data!"
+        , { feature = "Avoid potential hazards from certain nutrients and other compounds with the included hazard profile data!"
+          , featureTitle = "Hazard Profiles: "
           }
-        , { feature = "Vegan-Friendly Categorization: Use the included vegan-friendly categorization to help you navigate through the best vegan options!"
+        , { feature = "Use the included vegan-friendly categorization to help you navigate through the best vegan options!"
+          , featureTitle = "Vegan-Friendly Categorization: "
           }
-        , { feature = "Keto-Friendly Categorization: Use the included keto-friendly categorization to help you navigate through the best keto options!"
+        , { feature = "Use the included keto-friendly categorization to help you navigate through the best keto options!"
+          , featureTitle = "Keto-Friendly Categorization: "
           }
-        , { feature = "Grocery List: Keep expenses in check with an interactive grocery list that can intelligently estimate the cost of your grocery trip.\n"
+        , { feature = "Keep expenses in check with an interactive grocery list that can intelligently estimate the cost of your grocery trip. "
+          , featureTitle = "Grocery List: "
           }
-        , { feature = "Nutrition Analyser: Use the included nutrition analyser to quantify the nutrient content of your food selection, and minimize anti-nutrients, hunger, calories, sugar, and more!"
+        , { feature = "Use the included nutrition analyser to quantify the nutrient content of your food selection, and minimize anti-nutrients, hunger, calories, sugar, and more!"
+          , featureTitle = "Nutrition Analyser: "
           }
-        , { feature = "Meal Schedule: Schedule your meals and workouts, as well as calculate your calorie and macro requirements based on your goals and body composition!"
+        , { feature = "Schedule your meals and workouts, as well as calculate your calorie and macro requirements based on your goals and body composition!"
+          , featureTitle = "Meal Schedule: "
           }
-        , { feature = "Regular Updates: The Nutri-Dex is also regularly updated with new foods and nutrition data!"
+        , { feature = "The Nutri-Dex is also regularly updated with new foods and nutrition data!"
+          , featureTitle = "Regular Updates: "
           }
         ]
     , nutriDexReference =
-        [ { reference = "reference"
+        let
-          , author = "author"
+            instituteOfMedicinePub =
-          , year = "year"
+                "Standing Committee on the Scientific Evaluation of Dietary Reference Intakes and its Panel on Folate, Other B Vitamins, and Choline. "
-          , title = "title"
+
-          , link = "link"
+            instituteOfMedicineTitle =
+                "Institute of Medicine. "
+
+            nationalAcademiesPress =
+                "National Academies Press. "
+        in
+        [ { author = instituteOfMedicineTitle
+          , year = "1998"
+          , title = instituteOfMedicinePub ++ "Thiamine. "
+          , journal = nationalAcademiesPress
+          , link = "https://www.ncbi.nlm.nih.gov/books/NBK114331/"
+          }
+        , { author = instituteOfMedicineTitle
+          , year = "1998"
+          , title = instituteOfMedicinePub ++ "Riboflavin. "
+          , journal = nationalAcademiesPress
+          , link = "https://www.ncbi.nlm.nih.gov/books/NBK114322/"
+          }
+        , { author = instituteOfMedicineTitle
+          , year = "1998"
+          , title = instituteOfMedicinePub ++ "Niacin. "
+          , journal = nationalAcademiesPress
+          , link = "https://www.ncbi.nlm.nih.gov/books/NBK114304/"
+          }
+        , { author = instituteOfMedicineTitle
+          , year = "2011"
+          , title = "Dietary Reference Intakes for Calcium and Vitamin D. National Academies Press. "
+          , journal = nationalAcademiesPress
+          , link = "https://www.ncbi.nlm.nih.gov/books/NBK56056/"
+          }
+        , { author = instituteOfMedicineTitle
+          , year = "2006"
+          , title = "Dietary Reference Intakes: The Essential Guide to Nutrient Requirements. "
+          , journal = "Manganese. Chapter 39, page 352. "
+          , link = "https://www.nap.edu/read/11537/chapter/39"
+          }
+        , { author = instituteOfMedicineTitle
+          , year = "2006"
+          , title = "Dietary Reference Intakes: The Essential Guide to Nutrient Requirements. "
+          , journal = "Phosphorus. Chapter 41, page 364. "
+          , link = "https://www.nap.edu/read/11537/chapter/41"
+          }
+        , { author = instituteOfMedicineTitle
+          , year = "2006"
+          , title = "Dietary Reference Intakes: The Essential Guide to Nutrient Requirements. "
+          , journal = "Potassium. Chapter 41, page 372. "
+          , link = "https://www.nap.edu/read/11537/chapter/42"
+          }
+        , { author = instituteOfMedicineTitle
+          , year = "1998"
+          , title = instituteOfMedicinePub ++ "Panthotheic Acid. "
+          , journal = nationalAcademiesPress
+          , link = "https://www.ncbi.nlm.nih.gov/books/NBK114311/"
+          }
+        , { author = "Reynolds RD. "
+          , year = "September 1988"
+          , title = "Bioavailability of vitamin B-6 from plant foods. "
+          , journal = "Am J Clin Nutr. "
+          , link = "https://www.ncbi.nlm.nih.gov/pubmed/2843032"
+          }
+        , { author = "Shibata, Keiko, Yasuyo Yasuhara, and Kazuto Yasuda"
+          , year = "2001"
+          , title = "Effects of Cooking Methods on the Retention of Vitamin B6 in Foods, and the Approximate Cooking Loss in Daily Meals. "
+          , journal = "J. Home Econ. Jpn. "
+          , link = "https://www.semanticscholar.org/paper/Effects-of-Cooking-Methods-on-the-Retention-of-B6-Shibata-Yasuhara/b8445e60d87753144ef856e0ae207b551aa75b9c"
+          }
+        , { author = "Carmel, R. "
+          , year = "2008"
+          , title = "How I treat cobalamin (vitamin B12) deficiency. "
+          , journal = "Blood"
+          , link = "https://www.ncbi.nlm.nih.gov/pubmed/18606874"
+          }
+        , { author = "Ohrvik, Veronica E. and Cornelia M. Witthoft"
+          , year = "2011"
+          , title = "Human Folate Bioavailability. "
+          , journal = "Nutrients"
+          , link = "https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3257685/"
+          }
+        , { author = "Novotny, Janet A., et al. "
+          , year = "2010"
+          , title = "β-Carotene Conversion to Vitamin A Decreases As the Dietary Dose Increases in Humans. "
+          , journal = "J Nutr. "
+          , link = "https://www.ncbi.nlm.nih.gov/pmc/articles/PMC2855261/"
+          }
+        , { author = "Gijsbers, B.L., Jie, K.S., and Vermeer, C. "
+          , year = "1996"
+          , title = "Effect of food composition on vitamin K absorption in human volunteers. "
+          , journal = "Br J Nutr. "
+          , link = "https://www.ncbi.nlm.nih.gov/pubmed/8813897"
+          }
+        , { author = "Jacob, R.A., and Sotoudeh, G. "
+          , year = "2002"
+          , title = "Vitamin C function and status in chronic disease. "
+          , journal = "Nutr Clin Care. "
+          , link = "https://www.ncbi.nlm.nih.gov/pubmed/12134712"
+          }
+        , { author = "Reboul, Emmanuelle"
+          , year = "2017"
+          , title = "Vitamin E Bioavailability: Mechanisms of Intestinal Absorption in the Spotlight. "
+          , journal = "Antioxidants (Basel). "
+          , link = "https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5745505/"
+          }
+        , { author = "Zhang, Zhiying, et al. "
+          , year = "2018"
+          , title = "Dietary Intakes of EPA and DHA Omega-3 Fatty Acids among US Childbearing-Age and Pregnant Women: An Analysis of NHANES 2001–2014. "
+          , journal = "Nutrients. "
+          , link = "https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5946201/"
+          }
+        , { author = "Sioen, Isabelle, et al. "
+          , year = "2017"
+          , title = "Systematic Review on N-3 and N-6 Polyunsaturated Fatty Acid Intake in European Countries in Light of the Current Recommendations – Focus on Specific Population Groups. "
+          , journal = "Ann Nutr Metab. "
+          , link = "https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5452278/"
+          }
+        , { author = "Burdge, G.C., and Wootton, S.A. "
+          , year = "2002"
+          , title = "Conversion of alpha-linolenic acid to eicosapentaenoic, docosapentaenoic and docosahexaenoic acids in young women. "
+          , journal = "Br J Nutr. "
+          , link = "https://www.ncbi.nlm.nih.gov/pubmed/12323090"
+          }
+        , { author = "Rett, Brian S., and Whelan, Jay"
+          , year = "2011"
+          , title = "Increasing dietary linoleic acid does not increase tissue arachidonic acid content in adults consuming Western-type diets: a systematic review. "
+          , journal = "Nutr Metab (Lond). "
+          , link = "https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3132704/"
+          }
+        , { author = "Lönnerdal, B. "
+          , year = "1996"
+          , title = "Bioavailability of copper. "
+          , journal = "Am J Clin Nutr. "
+          , link = "https://www.ncbi.nlm.nih.gov/pubmed/8615369"
+          }
+        , { author = "Fine, K.D., et al. "
+          , year = "1991"
+          , title = "Intestinal absorption of magnesium from food and supplements. "
+          , journal = "J Clin Invest. "
+          , link = "https://www.ncbi.nlm.nih.gov/pubmed/1864954"
+          }
+        , { author = "Fairweather-Tait, S.J., Collings, R., and Hurst, R. "
+          , year = "2010"
+          , title = "Selenium bioavailability: current knowledge and future research requirements. "
+          , journal = "Am J Clin Nutr. "
+          , link = "https://www.ncbi.nlm.nih.gov/pubmed/20200264"
+          }
+        , { author = "Lönnerdal, B. "
+          , year = "2000"
+          , title = "Dietary factors influencing zinc absorption. "
+          , journal = "J Nutr. "
+          , link = "https://www.ncbi.nlm.nih.gov/pubmed/10801947"
+          }
+        , { author = "PDCAAS Wikipedia article"
+          , year = ""
+          , title = "Protein Digestibility Corrected Amino Acid Score"
+          , journal = ""
+          , link = "https://en.wikipedia.org/wiki/Protein_Digestibility_Corrected_Amino_Acid_Score"
           }
         ]
     }

frontend/src/Products/Types.elm

@@ -10,13 +10,14 @@ type alias NutriDex =
 
 type alias Features =
     { feature : String
+    , featureTitle : String
     }
 
 
 type alias References =
-    { reference : String
+    { author : String
-    , author : String
     , title : String
     , link : String
     , year : String
+    , journal : String
     }