Search code examples
javascripthtmltypescriptsasselm

Editing start page in Elm


This is my first time working with Elm. If not the solution, could you suggest a resource that would help me solve such a problem ? The code given below is the start page for a website, from which I need to remove a few things -->

  1. A logo in the top left of the page (the part with Ad in the code)
  2. The whole footer (2 other logos and a version string).

I tried just removing the code which deals with this, but it started returning errors about it being Html Global.Msg and there being structural errors in the code. Errors about type annotation : and that this is not a function.

This is my first time working with Elm, so I am unable to understand anything at all. I couldn't get the exact errors also as I am asking this question hours after getting them and using the original instead.
Thanks anyways ;)

view : Shared -> Model -> List (Html Global.Msg)
view shared model =
    let
        r =
            model.route

        yum-cheeseAd { baseUrl } =
            Html.blankA
                [ HtmlA.href baseUrl, HtmlA.id "yum-cheese-ad", Strings.YumCheeseWhereToGet |> Lang.title shared ]
                [ Html.div []
                    [ Icon.boxOpen |> Icon.viewIcon
                    , Html.span [] [ Strings.YumCheese |> Lang.string shared |> Html.text ]
                    ]
                ]
    in
    [ Html.div [ HtmlA.class "page start" ]
        [ overlay shared model.overlay
        , Html.header [ HtmlA.class "title-card" ]
            [ Html.h1 [] [ Html.div [ HtmlA.class "card-slicer" ] [ Call.viewUnknown shared [] ] ]
            , Html.div [ HtmlA.class "subtitle" ]
                [ Html.div [ HtmlA.class "card-slicer" ]
                    [ Response.view shared Configure.fake Card.Front [] (subtitleCard shared)
                    ]
                ]
            ]
        , Card.view []
            [ Tabs.view shared
                { selected = r.section
                , change = \s -> Route.Start { r | section = s } |> Global.ChangePage
                , ids = NeList New [ Join model.gameCode, Find, About ]
                , tab = tabFor
                , equals = sectionsMatch
                }
            , sectionContent shared model
            ]
        , Html.footer [ HtmlA.class "version-info" ]
            [ Html.div [ HtmlA.class "logos" ]
                [ Html.blankA
                    [ HtmlA.class "logo"
                    , Strings.Project |> Lang.title shared
                    , HtmlA.href "https://something.com/"
                    ]
                    [ Icon.viewStyled [ Strings.LogoDescription |> Lang.alt shared ] Icon.YumCheese ]
                , Html.blankA
                    [ HtmlA.class "logo"
                    , Strings.DevelopedBy |> Lang.title shared
                    , HtmlA.href "https://www.qazwsx.com/"
                    ]
                    [ Icon.viewStyled [ Strings.LogoDescription |> Lang.alt shared ] Icon.rereadGames ]
                ]
            , Html.p [ HtmlA.class "version" ]
                [ Html.text "\""
                , Strings.YumCheese |> Lang.html shared
                , Html.text "\" "
                , Strings.Version { versionNumber = Version.version } |> Lang.html shared
                ]
            ]
        ]
    , shared.sources.yumcheese |> Maybe.map yumcheeseAd |> Maybe.withDefault Html.nothing
    ]


Solution

  • What about this:

    view : Shared -> Model -> List (Html Global.Msg)
    view shared model =
        let
            r =
                model.route
        in
        [ Html.div [ HtmlA.class "page start" ]
            [ overlay shared model.overlay
            , Html.header [ HtmlA.class "title-card" ]
                [ Html.h1 [] [ Html.div [ HtmlA.class "card-slicer" ] [ Call.viewUnknown shared [] ] ]
                , Html.div [ HtmlA.class "subtitle" ]
                    [ Html.div [ HtmlA.class "card-slicer" ]
                        [ Response.view shared Configure.fake Card.Front [] (subtitleCard shared)
                        ]
                    ]
                ]
            , Card.view []
                [ Tabs.view shared
                    { selected = r.section
                    , change = \s -> Route.Start { r | section = s } |> Global.ChangePage
                    , ids = NeList New [ Join model.gameCode, Find, About ]
                    , tab = tabFor
                    , equals = sectionsMatch
                    }
                , sectionContent shared model
                ]
            ]
        ]
    

    I removed the footer and the ad. Your error sounds like a syntax error. I suspect you went wrong by messing up the nested lists when you deleted stuff.

    If this doesn't fix your problem, I would suggest:

    1. Putting the complete error message in your question.

    2. Reading the Elm official guide if you haven't already. It won't take too long and will help with understanding the language.

    3. Constructing a minimal working example. This is what I do when stuck. Often you will find the solution while constructing it.