website/frontend/src/Pages/Services/Nix.elm

module Pages.Services.Nix exposing (Model, Msg, page)

import Config.Helpers.Cards.Helpers exposing (cardMaker)
import Config.Helpers.Cards.Types as C
import Config.Helpers.Format exposing (..)
import Config.Helpers.Headers.Helpers exposing (..)
import Config.Helpers.Headers.Types exposing (Header)
import Config.Helpers.Response
    exposing
        ( pageList
        , topLevelContainer
        )
import Config.Helpers.ServiceFormat exposing (..)
import Config.Helpers.ToolTip exposing (..)
import Config.Helpers.Viewport exposing (resetViewport)
import Config.Pages.Services.Records.NixBuilds exposing (servicesNixBuilds)
import Config.Style.Colour exposing (..)
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 Route.Path as Path
import Shared
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.map
        (\_ -> NoOp)
        (Effect.sendCmd resetViewport)
    )



-- 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 = "services (nixConfigs)"
    , attributes = []
    , element = elmBuildsContainer shared.device
    }


elmBuildsContainer : Device -> Element msg
elmBuildsContainer device =
    topLevelContainer (elmBuildsList device)


elmBuildsList : Device -> Element msg
elmBuildsList device =
    column
        (case ( device.class, device.orientation ) of
            _ ->
                pageList device
        )
    <|
        List.concat
            [ List.map
                (\service ->
                    cardMaker device (C.ServicePage service) contentList
                )
                [ servicesNixBuilds ]
            ]


contentList : List (Element msg)
contentList =
    [ column
        bodyFormat
        [ chunkMaker servicesNixBuilds.serviceArticle.articleParagraph.paragraph1
        , chunkMaker servicesNixBuilds.serviceArticle.articleParagraph.paragraph2
        , chunkMaker servicesNixBuilds.serviceArticle.articleParagraph.paragraph3
        , titleMaker servicesNixBuilds.serviceArticle.articleTitles.title1
        , numberMaker servicesNixBuilds.serviceArticle.articleListEntries.list1
        , titleMaker servicesNixBuilds.serviceArticle.articleTitles.title2
        , bulletPointMaker servicesNixBuilds.serviceArticle.articleListEntries.list2
        , titleMaker servicesNixBuilds.serviceArticle.articleTitles.title3
        , nixCodeRenderer
        ]
    ]


renderCodeLine : SyntaxColors -> List (Element msg) -> Element msg
renderCodeLine colors elements =
    paragraph
        [ F.color colors.text
        , F.alignLeft
        , F.family
            [ F.monospace ]
        ]
        elements


nixCodeRenderer : Element msg
nixCodeRenderer =
    el
        [ paddingEach
            { top = 15
            , bottom = 15
            , left = 20
            , right = 20
            }
        , B.color colourTheme.backgroundLightGrey
        , D.rounded 10
        , width fill
        , spacing 8
        ]
    <|
        column
            [ F.size 14
            , spacing 5
            , width fill
            ]
            [ renderCodeLine syntaxTheme
                [ text "{"
                    |> el [ F.color syntaxTheme.punctuation ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 8 0 ]
                , text "description"
                    |> el [ F.color syntaxTheme.key ]
                , text " = "
                    |> el [ F.color syntaxTheme.operator ]
                , text "\"Elm/Haskell Environment\""
                    |> el [ F.color syntaxTheme.string ]
                , text ";"
                    |> el [ F.color syntaxTheme.punctuation ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 8 0 ]
                , text "inputs"
                    |> el [ F.color syntaxTheme.key ]
                , text " = "
                    |> el [ F.color syntaxTheme.operator ]
                , text "{"
                    |> el [ F.color syntaxTheme.punctuation ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 16 0 ]
                , text "nixpkgs.url"
                    |> el [ F.color syntaxTheme.key ]
                , text " = "
                    |> el [ F.color syntaxTheme.operator ]
                , text "\"github:NixOS/nixpkgs/nixos-unstable\""
                    |> el [ F.color syntaxTheme.string ]
                , text ";"
                    |> el [ F.color syntaxTheme.punctuation ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 16 0 ]
                , text "nixpkgs-stable.url"
                    |> el [ F.color syntaxTheme.key ]
                , text " = "
                    |> el [ F.color syntaxTheme.operator ]
                , text "\"github:NixOS/nixpkgs/nixos-23.11\""
                    |> el [ F.color syntaxTheme.string ]
                , text ";"
                    |> el [ F.color syntaxTheme.punctuation ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 16 0 ]
                , text "haskell-flake.url"
                    |> el [ F.color syntaxTheme.key ]
                , text " = "
                    |> el [ F.color syntaxTheme.operator ]
                , text "\"github:srid/haskell-flake\""
                    |> el [ F.color syntaxTheme.string ]
                , text ";"
                    |> el [ F.color syntaxTheme.punctuation ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 8 0 ]
                , text "}"
                    |> el [ F.color syntaxTheme.punctuation ]
                , text ";"
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 8 0 ]
                , text "outputs"
                    |> el [ F.color syntaxTheme.key ]
                , text " = "
                    |> el [ F.color syntaxTheme.operator ]
                , text "inputs"
                    |> el [ F.color syntaxTheme.keyword ]
                , text " @ "
                    |> el [ F.color syntaxTheme.operator ]
                , text "{"
                    |> el [ F.color syntaxTheme.punctuation ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 16 0 ]
                , text "flake-parts"
                    |> el [ F.color syntaxTheme.keyword ]
                , text ","
                    |> el [ F.color syntaxTheme.punctuation ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 16 0 ]
                , text "self"
                    |> el [ F.color syntaxTheme.keyword ]
                , text ","
                    |> el [ F.color syntaxTheme.punctuation ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 16 0 ]
                , text "..."
                    |> el [ F.color syntaxTheme.operator ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 8 0 ]
                , text "}"
                    |> el [ F.color syntaxTheme.punctuation ]
                , text ": "
                    |> el [ F.color syntaxTheme.operator ]
                , text "let"
                    |> el [ F.color syntaxTheme.keyword ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 16 0 ]
                , text "system"
                    |> el [ F.color syntaxTheme.keyword ]
                , text " = "
                    |> el [ F.color syntaxTheme.operator ]
                , text "\"x86_64-linux\""
                    |> el [ F.color syntaxTheme.string ]
                , text ";"
                    |> el [ F.color syntaxTheme.punctuation ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 8 0 ]
                , text "in"
                    |> el [ F.color syntaxTheme.keyword ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 16 0 ]
                , text "flake-parts.lib.mkFlake"
                    |> el [ F.color syntaxTheme.keyword ]
                , text " { "
                    |> el [ F.color syntaxTheme.punctuation ]
                , text "inherit inputs"
                    |> el [ F.color syntaxTheme.keyword ]
                , text " } "
                    |> el [ F.color syntaxTheme.punctuation ]
                , text "{"
                    |> el [ F.color syntaxTheme.punctuation ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 24 0 ]
                , text "imports"
                    |> el [ F.color syntaxTheme.key ]
                , text " = "
                    |> el [ F.color syntaxTheme.operator ]
                , text "["
                    |> el [ F.color syntaxTheme.punctuation ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 32 0 ]
                , text "./parts"
                    |> el [ F.color syntaxTheme.string ]
                , text ","
                    |> el [ F.color syntaxTheme.punctuation ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 32 0 ]
                , text "inputs.haskell-flake.flakeModule"
                    |> el [ F.color syntaxTheme.keyword ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 24 0 ]
                , text "]"
                    |> el [ F.color syntaxTheme.punctuation ]
                , text ";"
                    |> el [ F.color syntaxTheme.punctuation ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 24 0 ]
                , text "systems"
                    |> el [ F.color syntaxTheme.key ]
                , text " = "
                    |> el [ F.color syntaxTheme.operator ]
                , text "[ "
                    |> el [ F.color syntaxTheme.punctuation ]
                , text "system"
                    |> el [ F.color syntaxTheme.keyword ]
                , text " ]"
                    |> el [ F.color syntaxTheme.punctuation ]
                , text ";"
                    |> el [ F.color syntaxTheme.punctuation ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 24 0 ]
                , text "perSystem"
                    |> el [ F.color syntaxTheme.key ]
                , text " = "
                    |> el [ F.color syntaxTheme.operator ]
                , text "{ "
                    |> el [ F.color syntaxTheme.punctuation ]
                , text "pkgs"
                    |> el [ F.color syntaxTheme.keyword ]
                , text ", ... "
                    |> el [ F.color syntaxTheme.operator ]
                , text "} "
                    |> el [ F.color syntaxTheme.punctuation ]
                , text ": "
                    |> el [ F.color syntaxTheme.operator ]
                , text "{"
                    |> el [ F.color syntaxTheme.punctuation ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 32 0 ]
                , text "_module.args.pkgs"
                    |> el [ F.color syntaxTheme.key ]
                , text " = "
                    |> el [ F.color syntaxTheme.operator ]
                , text "import"
                    |> el [ F.color syntaxTheme.keyword ]
                , text " inputs.nixpkgs "
                    |> el [ F.color syntaxTheme.keyword ]
                , text "{ "
                    |> el [ F.color syntaxTheme.punctuation ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 40 0 ]
                , text "inherit system"
                    |> el [ F.color syntaxTheme.key ]
                , text ";"
                    |> el [ F.color syntaxTheme.punctuation ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 32 0 ]
                , text "}"
                    |> el [ F.color syntaxTheme.punctuation ]
                , text ";"
                    |> el [ F.color syntaxTheme.punctuation ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 32 0 ]
                , text "_module.args.pkgs-stable"
                    |> el [ F.color syntaxTheme.key ]
                , text " = "
                    |> el [ F.color syntaxTheme.operator ]
                , text "import"
                    |> el [ F.color syntaxTheme.keyword ]
                , text " inputs.nixpkgs-stable "
                    |> el [ F.color syntaxTheme.keyword ]
                , text "{ "
                    |> el [ F.color syntaxTheme.punctuation ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 40 0 ]
                , text "inherit system"
                    |> el [ F.color syntaxTheme.key ]
                , text ";"
                    |> el [ F.color syntaxTheme.punctuation ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 32 0 ]
                , text "}"
                    |> el [ F.color syntaxTheme.punctuation ]
                , text ";"
                    |> el [ F.color syntaxTheme.punctuation ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 24 0 ]
                , text "}"
                    |> el [ F.color syntaxTheme.punctuation ]
                , text ";"
                    |> el [ F.color syntaxTheme.punctuation ]
                ]
            , renderCodeLine syntaxTheme
                [ text ""
                    |> el [ paddingXY 16 0 ]
                , text "}"
                    |> el [ F.color syntaxTheme.punctuation ]
                , text ";"
                    |> el [ F.color syntaxTheme.punctuation ]
                ]
            , renderCodeLine syntaxTheme
                [ text "}"
                    |> el [ F.color syntaxTheme.punctuation ]
                ]
            ]