website/frontend/src/Pages/Platforms.elm

module Pages.Platforms exposing (Model, Msg, page)

import Config.Identity as ID exposing (..)
import Config.Theme as T exposing (..)
import Effect exposing (Effect)
import Element exposing (..)
import Element.Font as F
import Html.Attributes as H exposing (style)
import Layouts
import Page exposing (Page)
import Route exposing (Route)
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
        }
        |> Page.withLayout toLayout


toLayout : Model -> Layouts.Layout Msg
toLayout model =
    Layouts.Navbar {}



-- INIT


type alias Model =
    {}


init : () -> ( Model, Effect Msg )
init () =
    ( {}
    , Effect.none
    )



-- 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 : Model -> View Msg
view model =
    { title = platformsName
    , attributes = []
    , element = platformsContainer
    }


platformsContainer : Element msg
platformsContainer =
    topLevelContainer platformsList


platformsList : Element msg
platformsList =
    column
        pageList
        platforms


type alias MakeRowInput msg =
    { logoImage : String
    , logoDescription : String
    , platformsLink : String
    , platformsTitle : String
    , platformsParagraph1 : List (Element msg)
    , platformsParagraph2 : List (Element msg)
    , platformsRecommendedClients : List ClientEntry
    }


type alias ClientEntry =
    { clientLink : String
    , clientLabel : String
    , clientText : String
    }


type alias ClientType =
    { android : String
    , ios : String
    , desktop : String
    , multiPlatform : String
    , browser : String
    }


makeRow : MakeRowInput msg -> Element msg
makeRow makeRowInput =
    let
        recommendedClients : Element msg
        recommendedClients =
            el [ F.bold ] (text "Recommended Clients: ")

        platformImageFormat : List (Attribute msg)
        platformImageFormat =
            [ width <| px 150
            , alignTop
            ]

        clientRows : List (Element msg)
        clientRows =
            if List.isEmpty makeRowInput.platformsRecommendedClients then
                [ text "No recommended clients available. Please use your browser." ]

            else
                List.map
                    (\client ->
                        row []
                            [ paragraphLinkFormat
                                { url = client.clientLink
                                , label = transitionHighlightedLinkHover <| text client.clientLabel
                                }
                            , text client.clientText
                            ]
                    )
                    makeRowInput.platformsRecommendedClients
    in
    row [ imageSpacer ]
        [ image platformImageFormat
            { src = makeRowInput.logoImage
            , description = makeRowInput.logoDescription
            }
        , column paragraphColumnFormat
            [ newTabLink highlightedTitleFormat
                { url = makeRowInput.platformsLink
                , label = text makeRowInput.platformsTitle
                }
            , paragraph paragraphFormat makeRowInput.platformsParagraph1
            , paragraph paragraphFormat makeRowInput.platformsParagraph2
            , paragraph paragraphFormat
                (recommendedClients :: clientRows)
            ]
        ]


platforms : List (Element msg)
platforms =
    let
        clientType : ClientType
        clientType =
            { android = " (android) "
            , ios = " (iOS)"
            , desktop = " (desktop) "
            , multiPlatform = " (multi-platform)"
            , browser = " (browser only)"
            }
    in
    List.map makeRow
        [ { logoImage = "platforms/mastodon.png"
          , logoDescription = "mastodon logo"
          , platformsLink = "https://the-nutrivore.social/"
          , platformsTitle = "MASTODON"
          , platformsParagraph1 = [ text "Microblogging will now be posted to my own self-hosted Mastodon instance. I've kinda grown tired of microblogging on X, where political correctness and unclear ban policies force me to constantly self-censor. I considered and ultimately rejected several alternative platforms. Eventually, I realized the solution to this problem is to simply self-host my own space―somewhere where I can be myself and speak as I please. And I recently obtained the necessary infrastructure to do this." ]
          , platformsParagraph2 =
                [ text "This instance is 100% mine, and I can't be censored or fucked with there. I invite everyone who values my content and interactions to follow me on this new platform (whether you agree with my views or not). My instance is a \"single-user\" instances, meaning I'm the only user. But you can still follow me! Just make an account on another instance, like "
                , paragraphLinkFormat { url = "https://mastodon.social", label = text "Mastodon.social" }
                , text " (alternatively, you can select whatever instance you wish from the "
                , paragraphLinkFormat { url = "https://instances.social/", label = text "official index" }
                , text "), follow me, and turn on notifications."
                ]
          , platformsRecommendedClients =
                [ { clientLink = "https://github.com/LucasGGamerM/moshidon"
                  , clientLabel = "Moshidon"
                  , clientText = clientType.android
                  }
                , { clientLink = "https://github.com/mastodon/mastodon-android"
                  , clientLabel = "Official"
                  , clientText = clientType.android
                  }
                , { clientLink = "https://github.com/tuskyapp/Tusky"
                  , clientLabel = "Tusky"
                  , clientText = clientType.android
                  }
                , { clientLink = "https://apps.apple.com/us/app/mastodon/id1571998974"
                  , clientLabel = "Official"
                  , clientText = clientType.ios
                  }
                ]
          }
        , { logoImage = "platforms/peertube.png"
          , logoDescription = "peertube logo"
          , platformsLink = "https://video.the-nutrivore.social/"
          , platformsTitle = "PEERTUBE"
          , platformsParagraph1 = [ text "I'm transitioning my video content from YouTube to my self-hosted PeerTube instance, because I strongly believe in freedom of speech, copyleft, and digital autonomy. YouTube has proven unreliable due to both censorship and copyright strikes levied against my channel. This shift allows me to better control my content and avoid these silly pitfalls." ]
          , platformsParagraph2 = [ text "Full-length videos are now exclusively available on PeerTube, while YouTube will only host clips. By registering on PeerTube and subscribing to my channels, you'll have access to all content. Just be sure to enable email notifications to be alerted of new uploads. I believe that those who are truly fans of my work and want the best experience possible will see this as a positive change." ]
          , platformsRecommendedClients = []
          }
        , { logoImage = "platforms/discord.png"
          , logoDescription = "discord logo"
          , platformsLink = "https://discord.gg/eeYQ2wJknS"
          , platformsTitle = "DISCORD"
          , platformsParagraph1 = [ text "The Nutrivore Discord server is an evidence-based community dedicated to debunking pseudoscience, especially in the fields of nutrition, health and fitness. Casual discourse is welcome, and includes topics such as cooking, gaming, technology, and more. Current members span many disciplines and include both students and professionals, all levels of interest and expertise are welcome." ]
          , platformsParagraph2 = [ text "The Discord server is not explicitly a debate server. However, we strongly encourage that disagreements be resolved using debate (preferably verbal), as long as it is conducted respectfully and in good faith. Though we also firmly believe that shaming sophistry and bad faith behaviour is a net good overall. The Discord server is planned to be replaced with a Matrix server in future." ]
          , platformsRecommendedClients =
                [ { clientLink = "https://github.com/Vendicated/Vencord"
                  , clientLabel = "Vencord"
                  , clientText = clientType.desktop
                  }
                , { clientLink = "https://discord.com/download"
                  , clientLabel = "Official"
                  , clientText = clientType.multiPlatform
                  }
                ]
          }
        ]