NuGet package 📦: Songhay.Modules.Bolero

These are the main concerns of this work:

• Utility, mostly sharing functions for Remoting, ILogger and IJSRuntime
• Visuals, a deliberately incomplete coverage of HTML, CSS and Bulma by Jeremy Thomas
• Models (Primitives), F♯ primitive obsession, supporting the Visuals

There are five utilities:

1. a utility for Bolero [src]
2. a utility for JSON documents [src]
3. a utility for IJSRuntime [src]
4. a utility for IRemoteService [src]
5. a utility for IServiceProvider [src]

The Songhay.StudioFloor.Client project showcases Bolero/Blazor in action (see “the ‘studio floor’ for this Solution” below). This project demonstrates how the RestApiMetadata type [src] reads appsettings.json of the form:

{
    "RestApiMetadata": {
        "PlayerApi": {
            "ApiBase": "http://localhost:3001",
            "ClaimsSet": {
                "endpoint-prefix": "api/player/v1",
                "route-for-video-yt-manifest": "video/youtube/{presentationKey}|placeholder",
                "route-for-video-yt-index": "video/youtube/playlist/index/{suffix}|placeholder",
                "route-for-video-yt-playlist": "video/youtube/playlist/{subFolder}/{blobName}|placeholder",
                "route-for-video-yt-playlist-set": "video/youtube/playlists/{suffix}/{id}|placeholder",
                "route-for-video-yt-curated-manifest": "video/youtube/videos/{presentationKey}|placeholder"
            }
        }
    }
}

The Elmish model [src] in the ‘studio floor’ sample shows how this JSON is loaded:

restApiMetadataOption =
    "PlayerApi"
    |> RestApiMetadata.fromConfiguration (getIConfiguration())
    |> RestApiMetadata.toRestApiMetadataOption (getILogger().LogException)

Here is my first attempt at building a DSL for HTML, CSS and Bulma CSS on top of Bolero. For example, here is an expression [GitHub], rendering Bulma tabs, overriding the Bolero ElmishComponent<_,_>:

override this.View model dispatch =
    concat {

        let tabPairs =
            [
                ( text "README", ReadMePage )
                ( concat { text "Bolero "; code { text "IJsRuntime" } }, BoleroJsRuntimePage )
                ( text "Bulma Visuals", BulmaVisualsPage )
            ]
            |> List.map (fun (n, page) ->
                    anchorElement NoCssClasses (HasAttr <| ElmishRoutes.router.HRef page) n, page
            )

        bulmaTabs
            (HasClasses <| CssClasses [
                ColorEmpty.BackgroundCssClassLight
                CssClass.tabsElementIsToggle
                CssClass.elementIsFullWidth
                SizeLarge.CssClass
            ])
            (fun page -> model.page = page)
            tabPairs

        cond model.page <| function
        | ReadMePage -> ReadMeElmishComponent.EComp model dispatch
        | BoleroJsRuntimePage -> BoleroJsRuntimeElmishComponent.EComp model dispatch
        | BulmaVisualsPage -> BulmaVisualsElmishComponent.EComp model dispatch
    }

The preference here (at the moment) is to have more types than functions for the DSL. These types are grouped into four models of primitives:

1. Bulma Primitives [src]
2. CSS Primitives [src]
3. HTML Primitives [src]
4. SVG Primitives [src]

These models support the functions of the Visuals:

1. HTML Body Visuals [src]
2. CSS Declarations [src]
3. HTML Head Elements [src]
4. Bulma Component Visuals [src]
5. Bulma CSS Class names [src]
6. Bulma Element Visuals [src]
7. Bulma Form Element Visuals [src]
8. Bulma Layout Visuals [src]

The coverage of HTML is quite limited because Bulma itself has its own, excellent HTML DSL on which this work depends heavily. The generic CSS coverage is starting off with typography. The Bulma-specific coverage is the most extensive but lacking in the following areas:

• the Bulma pagination component
• the Bulma file form element

I look forward to working a bit more on this Bulma coverage, likely starting with Bulma pagination.

In order to toggle the Bulma Navbar burger and its dropdown menu, the following JavaScript is needed:

(() => {

    window.addEventListener('DOMContentLoaded', () => {
        const burger = document.querySelector('.navbar-burger');
        const nav = document.querySelector(`#${burger.dataset.target}`);
        const isActiveCssClass = 'is-active';

        burger.addEventListener('click', () => {
            burger.classList.toggle(isActiveCssClass);
            nav.classList.toggle(isActiveCssClass);
        });
    });

})();

This JavaScript is similar to the code provided in the Bulma documentation.

`Songhay.Modules.Bolero`

The Songhay.StudioFloor.Client project [GitHub] has at least two purposes:

1. demonstrate how the Bulma components and elements look and operate
2. provide a “reference” SCSS and Typescript npm pipeline

🐙🐈BryanWilhite