Setup elm-css in frontend

frontend/elm-srcs.nix

@@ -1,27 +1,7 @@
 {
 
-      "krisajenkins/remotedata" = {
-        sha256 = "0m5bk0qhsjv14vajqrkph386696pnhj5rn51kgma8lwyvvx9ihw1";
-        version = "6.0.1";
-      };
-
-      "elm/json" = {
-        sha256 = "0kjwrz195z84kwywaxhhlnpl3p251qlbm5iz6byd6jky2crmyqyh";
-        version = "1.1.3";
-      };
-
-      "truqu/elm-base64" = {
-        sha256 = "12w68b4idbs2vn0gm0lj354pm745jb7n0fj69408mpvh5r1z4m1b";
-        version = "2.0.4";
-      };
-
-      "elm/regex" = {
-        sha256 = "0lijsp50w7n1n57mjg6clpn9phly8vvs07h0qh2rqcs0f1jqvsa2";
-        version = "1.0.0";
-      };
-
-      "elm/html" = {
-        sha256 = "1n3gpzmpqqdsldys4ipgyl1zacn0kbpc3g4v3hdpiyfjlgh8bf3k";
+      "NoRedInk/elm-json-decode-pipeline" = {
+        sha256 = "0y25xn0yx1q2xlg1yx1i0hg4xq1yxx6yfa99g272z8162si75hnl";
         version = "1.0.0";
       };
 
@@ -35,8 +15,8 @@
         version = "1.0.4";
       };
 
-      "elm/url" = {
-        sha256 = "0av8x5syid40sgpl5vd7pry2rq0q4pga28b4yykn9gd9v12rs3l4";
+      "elm/html" = {
+        sha256 = "1n3gpzmpqqdsldys4ipgyl1zacn0kbpc3g4v3hdpiyfjlgh8bf3k";
         version = "1.0.0";
       };
 
@@ -45,8 +25,18 @@
         version = "2.0.0";
       };
 
-      "NoRedInk/elm-json-decode-pipeline" = {
-        sha256 = "0y25xn0yx1q2xlg1yx1i0hg4xq1yxx6yfa99g272z8162si75hnl";
+      "elm/json" = {
+        sha256 = "0kjwrz195z84kwywaxhhlnpl3p251qlbm5iz6byd6jky2crmyqyh";
+        version = "1.1.3";
+      };
+
+      "elm/regex" = {
+        sha256 = "0lijsp50w7n1n57mjg6clpn9phly8vvs07h0qh2rqcs0f1jqvsa2";
+        version = "1.0.0";
+      };
+
+      "elm/url" = {
+        sha256 = "0av8x5syid40sgpl5vd7pry2rq0q4pga28b4yykn9gd9v12rs3l4";
         version = "1.0.0";
       };
 
@@ -55,6 +45,21 @@
         version = "2.3.4";
       };
 
+      "krisajenkins/remotedata" = {
+        sha256 = "0m5bk0qhsjv14vajqrkph386696pnhj5rn51kgma8lwyvvx9ihw1";
+        version = "6.0.1";
+      };
+
+      "rtfeldman/elm-css" = {
+        sha256 = "1gwhgqwclc7clk1ns4qqzyn7b4wvcmccg9qavvb8m694qmwlkzjy";
+        version = "18.0.0";
+      };
+
+      "truqu/elm-base64" = {
+        sha256 = "12w68b4idbs2vn0gm0lj354pm745jb7n0fj69408mpvh5r1z4m1b";
+        version = "2.0.4";
+      };
+
       "elm/bytes" = {
         sha256 = "02ywbf52akvxclpxwj9n04jydajcbsbcbsnjs53yjc5lwck3abwj";
         version = "1.0.8";
@@ -65,11 +70,6 @@
         version = "1.0.5";
       };
 
-      "rtfeldman/elm-hex" = {
-        sha256 = "1y0aa16asvwdqmgbskh5iba6psp43lkcjjw9mgzj3gsrg33lp00d";
-        version = "1.0.0";
-      };
-
       "elm/parser" = {
         sha256 = "0a3cxrvbm7mwg9ykynhp7vjid58zsw03r63qxipxp3z09qks7512";
         version = "1.1.0";
@@ -85,18 +85,28 @@
         version = "1.0.2";
       };
 
+      "robinheghan/murmur3" = {
+        sha256 = "15asmgr2zqh7rkywrg5647rpdqkpzxk02v5qc6ndj60jza3gsmjk";
+        version = "1.0.0";
+      };
+
+      "rtfeldman/elm-hex" = {
+        sha256 = "1y0aa16asvwdqmgbskh5iba6psp43lkcjjw9mgzj3gsrg33lp00d";
+        version = "1.0.0";
+      };
+
       "elm-explorations/test" = {
         sha256 = "1fsd7bajm7qa93r5pn3mdafqh3blpzya601jbs9l238p0hmvh576";
         version = "1.2.2";
       };
 
-      "elm/svg" = {
-        sha256 = "1cwcj73p61q45wqwgqvrvz3aypjyy3fw732xyxdyj6s256hwkn0k";
-        version = "1.0.1";
-      };
-
       "elm/random" = {
         sha256 = "138n2455wdjwa657w6sjq18wx2r0k60ibpc4frhbqr50sncxrfdl";
         version = "1.0.0";
       };
-}
+
+      "elm/svg" = {
+        sha256 = "1cwcj73p61q45wqwgqvrvz3aypjyy3fw732xyxdyj6s256hwkn0k";
+        version = "1.0.1";
+      };
+}

frontend/elm.json

@@ -16,6 +16,7 @@
       "elm/url": "1.0.0",
       "hecrj/html-parser": "2.3.4",
       "krisajenkins/remotedata": "6.0.1",
+      "rtfeldman/elm-css": "18.0.0",
       "truqu/elm-base64": "2.0.4"
     },
     "indirect": {
@@ -24,6 +25,7 @@
       "elm/parser": "1.1.0",
       "elm/time": "1.0.0",
       "elm/virtual-dom": "1.0.2",
+      "robinheghan/murmur3": "1.0.0",
       "rtfeldman/elm-hex": "1.0.0"
     }
   },

frontend/src/Main.elm

@@ -2,22 +2,9 @@ module Main exposing (main)
 
 import Browser
 import Browser.Navigation
-import Html
-    exposing
-        ( Html
-        , a
-        , div
-        , footer
-        , header
-        , img
-        , li
-        , small
-        , span
-        , sup
-        , text
-        , ul
-        )
-import Html.Attributes
+import Html as ElmHtml
+import Html.Styled exposing (Html, a, div, footer, header, img, li, small, span, sup, text, ul)
+import Html.Styled.Attributes
     exposing
         ( alt
         , class
@@ -38,6 +25,7 @@ import Search
         , decodeNixOSChannels
         , defaultFlakeId
         )
+import Style exposing (withStyled)
 import Url
 
 
@@ -339,7 +327,7 @@ view :
     Model
     ->
         { title : String
-        , body : List (Html Msg)
+        , body : List (ElmHtml.Html Msg)
         }
 view model =
     let
@@ -379,44 +367,43 @@ view model =
     in
     { title = title
     , body =
-        [ div []
-            [ header []
-                [ div [ class "navbar navbar-static-top" ]
-                    [ div [ class "navbar-inner" ]
-                        [ div [ class "container" ]
-                            [ a [ class "brand", href "https://nixos.org" ]
-                                [ img [ alt "NixOS logo", src "https://nixos.org/logo/nix-wiki.png", class "logo" ] []
-                                ]
-                            , div []
-                                [ ul [ class "nav pull-left" ]
-                                    (viewNavigation model.route)
-                                ]
+        [ header []
+            [ div [ class "navbar navbar-static-top" ]
+                [ div [ class "navbar-inner" ]
+                    [ div [ class "container" ]
+                        [ a [ class "brand", href "https://nixos.org" ]
+                            [ img [ alt "NixOS logo", src "https://nixos.org/logo/nix-wiki.png", class "logo" ] []
+                            ]
+                        , div []
+                            [ ul [ class "nav pull-left" ]
+                                (viewNavigation model.route)
                             ]
                         ]
                     ]
                 ]
-            , div [ class "container main" ]
-                [ div [ id "content" ] [ viewPage model ]
-                , footer
-                    [ class "container text-center" ]
-                    [ div []
-                        [ span [] [ text "Please help us improve the search by " ]
-                        , a
-                            [ href "https://github.com/NixOS/nixos-search/issues"
-                            ]
-                            [ text "reporting issues" ]
-                        , span [] [ text "." ]
-                        ]
-                    , div []
-                        [ span [] [ text "❤️  " ]
-                        , span [] [ text "Elasticsearch instance graciously provided by " ]
-                        , a [ href "https://bonsai.io" ] [ text "Bonsai" ]
-                        , span [] [ text ". Thank you! ❤️ " ]
+            ]
+        , div [ class "container main" ]
+            [ div [ id "content" ] [ viewPage model ]
+            , footer
+                [ class "container text-center" ]
+                [ div []
+                    [ span [] [ text "Please help us improve the search by " ]
+                    , a
+                        [ href "https://github.com/NixOS/nixos-search/issues"
                         ]
+                        [ text "reporting issues" ]
+                    , span [] [ text "." ]
+                    ]
+                , div []
+                    [ span [] [ text "❤️  " ]
+                    , span [] [ text "Elasticsearch instance graciously provided by " ]
+                    , a [ href "https://bonsai.io" ] [ text "Bonsai" ]
+                    , span [] [ text ". Thank you! ❤️ " ]
                     ]
                 ]
             ]
         ]
+            |> withStyled
     }
 
 
@@ -465,13 +452,13 @@ viewPage model =
             div [] [ text "Not Found" ]
 
         Packages packagesModel ->
-            Html.map (\m -> PackagesMsg m) <| Page.Packages.view model.nixosChannels packagesModel
+            Html.Styled.map (\m -> PackagesMsg m) <| Page.Packages.view model.nixosChannels packagesModel
 
         Options optionsModel ->
-            Html.map (\m -> OptionsMsg m) <| Page.Options.view model.nixosChannels optionsModel
+            Html.Styled.map (\m -> OptionsMsg m) <| Page.Options.view model.nixosChannels optionsModel
 
         Flakes flakesModel ->
-            Html.map (\m -> FlakesMsg m) <| Page.Flakes.view model.nixosChannels flakesModel
+            Html.Styled.map (\m -> FlakesMsg m) <| Page.Flakes.view model.nixosChannels flakesModel
 
 
 

frontend/src/Page/Flakes.elm

@@ -8,7 +8,7 @@ module Page.Flakes exposing
     )
 
 import Browser.Navigation
-import Html
+import Html.Styled
     exposing
         ( Html
         , a
@@ -17,12 +17,12 @@ import Html
         , strong
         , text
         )
-import Html.Attributes
+import Html.Styled.Attributes
     exposing
         ( class
         , href
         )
-import Html.Events exposing (onClick)
+import Html.Styled.Events exposing (onClick)
 import Http exposing (Body)
 import Page.Options exposing (Msg(..))
 import Page.Packages exposing (Msg(..))
@@ -197,10 +197,10 @@ view nixosChannels model =
         body =
             case model of
                 OptionModel model_ ->
-                    Html.map OptionsMsg <| mkBody "Options" model_ Page.Options.viewSuccess Page.Options.viewBuckets Page.Options.SearchMsg
+                    Html.Styled.map OptionsMsg <| mkBody "Options" model_ Page.Options.viewSuccess Page.Options.viewBuckets Page.Options.SearchMsg
 
                 PackagesModel model_ ->
-                    Html.map PackagesMsg <| mkBody "Packages" model_ Page.Packages.viewSuccess Page.Packages.viewBuckets Page.Packages.SearchMsg
+                    Html.Styled.map PackagesMsg <| mkBody "Packages" model_ Page.Packages.viewSuccess Page.Packages.viewBuckets Page.Packages.SearchMsg
     in
     body
 

frontend/src/Page/Options.elm

@@ -15,7 +15,7 @@ module Page.Options exposing
     )
 
 import Browser.Navigation
-import Html
+import Html.Styled
     exposing
         ( Html
         , a
@@ -28,14 +28,8 @@ import Html
         , text
         , ul
         )
-import Html.Attributes
-    exposing
-        ( class
-        , classList
-        , href
-        , target
-        )
-import Html.Events
+import Html.Styled.Attributes exposing (class, classList, css, href, target)
+import Html.Styled.Events
     exposing
         ( onClick
         )
@@ -49,6 +43,7 @@ import Search
         , NixOSChannel
         , decodeResolvedFlake
         )
+import Style
 import Utils
 
 
@@ -185,15 +180,15 @@ viewResultItem :
 viewResultItem nixosChannels channel _ show item =
     let
         asPre value =
-            pre [] [ text value ]
+            pre [ css [ Style.pre.base ] ] [ text value ]
 
         asPreCode value =
-            div [] [ pre [] [ code [ class "code-block" ] [ text value ] ] ]
+            pre [ css [ Style.pre.base, Style.pre.code ] ] [ text value ]
 
         showDetails =
             if Just item.source.name == show then
                 Just <|
-                    div [ Html.Attributes.map SearchMsg Search.trapClick ] <|
+                    div [ Html.Styled.Attributes.map SearchMsg Search.trapClick ] <|
                         [ div [] [ text "Name" ]
                         , div [] [ asPreCode item.source.name ]
                         ]