Rework examples

[upsiflu]

• [x] Condense Code examples: Show only relevant lines (perhaps with highlights)
• [x] Add Full-text search
  • [x] ?Search=a b c shows only chapters that have all three
  • [x] Replace Toc with Search Results by setting ?Toc="" for all chapters
  • [x] We can use progressive disclosure to enable the filter feature under a certain page:
    • [x] Filter "q" [ viewToc... ]
    • [x] Toggle "enable filter" [ Search "q" [List.concatMap viewToken >> at Toc]
  • [x] Make Html handle space separation:
    • x ] The Url still stores the contents of the input, and may store several instances of one searchTerm
    • [x] New: The filter list is already concatMapped to String.split
    • [x] New: The tokens now toggle a ("search=" ++ String.join " " (List.remove flag spaceSeparatedSearchTerms))

---

Situation: Examples have no obvious logic or progression

Would be nice: Either an overview of all features or some sort of progressive tutorial, or both.

Nice example:

• elm-any-type-forms https://edkelly303.github.io/elm-any-type-forms/

Questions:

1. Sometimes, small examples next to the functions are nicer than a big example in the /test or /examples folder. Where's the boundary? Which features can be illustrated (and verified) inside the doc comments? Which ones should be part of the tutorial?

Scope of examples:

1. Build an application without a persistent model
   • Let your view show in multiple regions
   • Progressive disclosure: toggle a property sheet
   • Let your user filter a list of items
   • Combine filters
   • Toggle across preset filters
2. Nest a widget (example: elm-any-type-form) and persist the model state
   • Build an editor for shapes
   • Replace Control.views with your own property sheets
   • Persist your data with elm-multitool
3. Build a non-Html Ui -> Milestone v2
   • Tui (...)

[upsiflu]

Ideas:

type Region = Toc | Main | Control | Output

In the view, we have a series of chapters. Each has associated md at Main and is wrapped in a goTo at Toc. In addition, togglebuttons may appear in the Toc under active pages. The Control region would have filters and filtered lists in the first chapter, and the shapes in the second chapter. The output region could appear just as we bring in elm-multitool and url-codec.

We can make very type-centric modules.

Perhaps we don't use shapes as examples but the md texts and examples that are displayed anyways. We could bring in elm-rte into the control for good measure... fun! In that case, the chapters go into the model and can be rearranged through elm-any-type-forms, and we can watch the Ui adapt in realtime. And we could have fulltext search!

[upsiflu]

A self-explaining example.

import markdown
import Less

main =
     Less.application
        { init = init
        , update = update
        , view =
          Less.mapDocument identity
            { body =
               Ui.singleton (md ```import markdown import Less etc.```)
             , layout = Less.Ui.Html.layout
             , title = "Less Ui feature test"
            }
        }

[upsiflu]

view = goTo { "chapter1" } chapter1 ++ goTo { "chapter2" } chapter2 ++ (Explanation text |> at Main) |> toggle { "Table of Contents" } |> at Toc

chapter1 =

• toggle (Toc)
• goTo (chapters)
• (Explanation |> at Main ++ code |> at Code )

chapter3 = (List with search results in the Main + fulltext search for the chapters in the toc + some preset filters)

• code in the Code panel

chapter4 = TODO: Nesting (for elm-any-type-forms/multitool)

[upsiflu]

It's live. :-)