👁 Image
Songhay.Modules.Bolero 8.1.0

Songhay.Modules.Bolero

shared functions and types for Bolero, supporting CSS 💄, specifically Bulma CSS 🍱🖼

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

Utility

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]

support for Blazor wwwroot/appsettings.json conventions

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)

Visuals and Models

Here is my first attempt at building a <acronym title="Domain-Specific Language">DSL</acronym> 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 <acronym title="Domain-Specific Language">DSL</acronym>. 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 <acronym title="Domain-Specific Language">DSL</acronym> on which this work depends heavily. The generic <acronym title="Cascading Style Sheets">CSS</acronym> 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.

custom JavaScript is needed for the Bulma Navbar

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.

the ‘studio floor’ for this Solution

<div style="text-align:center">

<figure> <a href="https://www.youtube.com/watch?v=rAwZw6UPRXw"> <img alt="Songhay.Modules.Bolero" src="https://img.youtube.com/vi/rAwZw6UPRXw/maxresdefault.jpg" width="480" /> </a> <p><small>Songhay.Modules.Bolero</small></p> </figure>

</div>

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” <acronym title="Sassy CSS">SCSS</acronym> and Typescript npm pipeline

🐙🐈BryanWilhite