{"id":17770456,"url":"https://github.com/gampleman/elm-examples-helper","last_synced_at":"2025-04-01T14:25:38.598Z","repository":{"id":62418509,"uuid":"276177114","full_name":"gampleman/elm-examples-helper","owner":"gampleman","description":"A simple package that makes examples simpler yet nicer","archived":false,"fork":false,"pushed_at":"2020-11-18T22:01:39.000Z","size":16,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-07T09:13:59.647Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gampleman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"gampleman"}},"created_at":"2020-06-30T18:22:07.000Z","updated_at":"2020-12-07T17:43:34.000Z","dependencies_parsed_at":"2022-11-01T16:47:55.812Z","dependency_job_id":null,"html_url":"https://github.com/gampleman/elm-examples-helper","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gampleman%2Felm-examples-helper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gampleman%2Felm-examples-helper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gampleman%2Felm-examples-helper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gampleman%2Felm-examples-helper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gampleman","download_url":"https://codeload.github.com/gampleman/elm-examples-helper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246653060,"owners_count":20812235,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-26T21:23:11.340Z","updated_at":"2025-04-01T14:25:38.573Z","avatar_url":"https://github.com/gampleman.png","language":"Elm","funding_links":["https://github.com/sponsors/gampleman"],"categories":[],"sub_categories":[],"readme":"# elm-examples-helper\n\nWhen writing examples either as documentation for packages or for blog posts, one has two conflicting goals:\n\n1. The example should be as short as possible, removing as much boilerplate as can be done, and focusing the example code on the point being made.\n2. The running example should look good, be engaging (interactive/animated) and be robust (proper error handling).\n\nThe aim of this package is to help you reconcile these goals by adding simple, yet powerful behaviors to your example.\n\n## Installation\n\n```sh\nelm install gampleman/elm-examples-helper\n```\n\n## What's included?\n\nA `loading` and `error` views suitable for doing HTTP in an example. This allows your example to focus on the \"happy path\" while still getting a nice loading spinner and a solid error message (with optional retry functionality):\n\n```elm\n\nimport Example\nimport Browser\nimport Http\n\ntype Model\n    = Loading\n    | Error Http.Error\n    | Loaded { data : List String }\n\n\nview : Model -\u003e Html Msg\nview model =\n    case model of\n        Loading -\u003e\n            Example.loading []\n\n        Error err -\u003e\n            Example.error (Just Retry) err\n\n        Loaded data -\u003e\n            viewData data\n\n\ntype Msg\n    = RecievedData (Result Http.Error (List RawBrand))\n    | Retry\n\nmain =\n    Browser.element\n        { init = init\n        , view = view\n        , update = update\n        , subscriptions = subscriptions\n        }\n\ninit : () -\u003e ( Model, Cmd Msg )\ninit () =\n    ( Loading\n    , Http.get\n        { url = \"data.csv\"\n        , expect = expectCsv RecievedData decoder\n        }\n    )\n\nupdate : Msg -\u003e Model -\u003e ( Model, Cmd Msg )\nupdate msg model =\n    case ( msg, model ) of\n        ( RecievedData (Ok data), _ ) -\u003e\n            ( Loaded { data = data} , Cmd.none)\n\n        ( RecievedData (Err e), _ ) -\u003e\n            ( Error e, Cmd.none )\n\n        Retry -\u003e\n            init ()\n\n        _ -\u003e\n            ( model, Cmd.none )\n\n\n\n```\n\nAn application type for doing examples, where a view function accepts some config. This application type gives you a form for doing the configuring, while also giving you a url based shareing feature for free.\n\nThe simplest form allows you to switch between predefined views:\n\n```elm\nimport Example\n\ntype alias Model =\n    { page : Int\n    }\n\nview : Model -\u003e Html msg\nview model =\n    div []\n    [ h2 [] [text (String.fromInt model.page)]\n    ]\n\nmain : Example.Program Model\nmain =\n    Example.tabbed \"pages\"\n        [ ( \"First page\", { page = 1 })\n        , ( \"Second page\", { page = 2 })\n        ]\n        |\u003e Example.application view\n```\n\nYou can of course configure it to use a more complex form, as well as enabling some bells and whistles (like animated transitions):\n\n```elm\nimport Example\nimport Color exposing (Color)\nimport Interpolation\n\ntype alias Model =\n    { start : Color\n    , end : Color\n    , count : Int\n    }\n\nview : Model -\u003e Html msg\nview model =\n    yourCoolViewFunction\n\n\nmain : Example.Program Model\nmain =\n    Example.configuration\n        { start = Color.rgb255 0 255 0\n        , end = Color.rgb255 255 2 0\n        , count = 50\n        }\n        [ Example.colorPicker \"Start Color\" .fromColorValue (\\v m -\u003e { m | fromColorValue = v })\n        , Example.colorPicker \"End Color\" .toColorValue (\\v m -\u003e { m | toColorValue = v })\n        , Example.intSlider \"Number of Colors\" { min = 3, max = 100} .count (\\v m -\u003e { m | count = v })\n        ]\n        |\u003e Example.withTitle \"My super cool example\"\n        |\u003e Example.withCustomCss \"\"\"\n            .some-class { opacity: 0.5; }\n            \"\"\"\n        |\u003e Example.animatedWith interpolator\n        |\u003e Example.application view\n\n\ninterpolator : Model -\u003e Model -\u003e Float -\u003e Model\ninterpolator from to t =\n    { start = Interpolation.hsl from.start to.start t\n    , end = Interpolation.hsl from.end to.end t\n    , count = Interpolation.count from.count to.count t\n    }\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgampleman%2Felm-examples-helper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgampleman%2Felm-examples-helper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgampleman%2Felm-examples-helper/lists"}