https://github.com/bryanwilhite/songhay.modules.bolero
shared functions and types for Bolero, supporting CSS 💄, specifically Bulma CSS 🍱🖼
https://github.com/bryanwilhite/songhay.modules.bolero
Last synced: about 1 month ago
JSON representation
shared functions and types for Bolero, supporting CSS 💄, specifically Bulma CSS 🍱🖼
- Host: GitHub
- URL: https://github.com/bryanwilhite/songhay.modules.bolero
- Owner: BryanWilhite
- License: mit
- Created: 2022-09-27T17:48:16.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-12-22T08:00:06.000Z (10 months ago)
- Last Synced: 2024-12-22T08:35:16.632Z (10 months ago)
- Language: F#
- Size: 9.18 MB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Songhay.Modules.Bolero
## shared functions and types for Bolero, supporting CSS 💄, specifically Bulma CSS 🍱🖼
**NuGet package 📦:** [`Songhay.Modules.Bolero`](https://www.nuget.org/packages/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](https://bulma.io/) by [Jeremy Thomas](https://jgthms.com/)
- Models (Primitives), F♯ primitive obsession, supporting the Visuals
## Utility
There are five utilities:
1. a utility for [Bolero](https://github.com/fsbolero/bolero) [[src](https://github.com/BryanWilhite/Songhay.Modules.Bolero/blob/main/Songhay.Modules.Bolero/BoleroUtility.fs)]
2. a utility for JSON documents [[src](https://github.com/BryanWilhite/Songhay.Modules.Bolero/blob/main/Songhay.Modules.Bolero/JsonDocumentUtility.fs)]
3. a utility for `IJSRuntime` [[src](https://github.com/BryanWilhite/Songhay.Modules.Bolero/blob/main/Songhay.Modules.Bolero/JsRuntimeUtility.fs)]
4. a utility for `IRemoteService` [[src](https://github.com/BryanWilhite/Songhay.Modules.Bolero/blob/main/Songhay.Modules.Bolero/RemoteHandlerUtility.fs)]
5. a utility for `IServiceProvider` [[src](https://github.com/BryanWilhite/Songhay.Modules.Bolero/blob/main/Songhay.Modules.Bolero/ServiceProviderUtility.fs)]
## support for Blazor `wwwroot/appsettings.json` conventions
The `Songhay.StudioFloor.Client` [project](https://github.com/BryanWilhite/) showcases Bolero/Blazor in action (see “the ‘studio floor’ for this Solution” below). This project demonstrates how the `RestApiMetadata` type [[src](https://github.com/BryanWilhite/Songhay.Modules.Bolero/blob/main/Songhay.Modules.Bolero/Models/BoleroPrimitives.fs)] reads `appsettings.json` of the form:
```json
{
"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](https://github.com/BryanWilhite/Songhay.Modules.Bolero/blob/main/Songhay.StudioFloor.Client/Models/StudioFloorModel.fs)] in the ‘studio floor’ sample shows how this JSON is loaded:
```fsharp
restApiMetadataOption =
"PlayerApi"
|> RestApiMetadata.fromConfiguration (getIConfiguration())
|> RestApiMetadata.toRestApiMetadataOption (getILogger().LogException)
```
## Visuals and Models
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](https://github.com/BryanWilhite/Songhay.Modules.Bolero/blob/main/Songhay.StudioFloor.Client/Components/TabsElmishComponent.fs#L25)], rendering [Bulma tabs](https://bulma.io/documentation/components/tabs/), overriding the Bolero `ElmishComponent<_,_>`:
```fsharp
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](https://github.com/BryanWilhite/Songhay.Modules.Bolero/blob/main/Songhay.Modules.Bolero/Models/BulmaPrimitives.fs)]
2. CSS Primitives [[src](https://github.com/BryanWilhite/Songhay.Modules.Bolero/blob/main/Songhay.Modules.Bolero/Models/CssPrimitives.fs)]
3. HTML Primitives [[src](https://github.com/BryanWilhite/Songhay.Modules.Bolero/blob/main/Songhay.Modules.Bolero/Models/HtmlPrimitives.fs)]
4. SVG Primitives [[src](https://github.com/BryanWilhite/Songhay.Modules.Bolero/blob/main/Songhay.Modules.Bolero/Models/SvgPrimitives.fs)]
These models support the functions of the Visuals:
1. HTML Body Visuals [[src](https://github.com/BryanWilhite/Songhay.Modules.Bolero/blob/main/Songhay.Modules.Bolero/Visuals/BodyElement.fs)]
2. CSS Declarations [[src](https://github.com/BryanWilhite/Songhay.Modules.Bolero/blob/main/Songhay.Modules.Bolero/Visuals/CssDeclaration.fs)]
3. HTML Head Elements [[src](https://github.com/BryanWilhite/Songhay.Modules.Bolero/blob/main/Songhay.Modules.Bolero/Visuals/HeadElement.fs)]
4. Bulma Component Visuals [[src](https://github.com/BryanWilhite/Songhay.Modules.Bolero/blob/main/Songhay.Modules.Bolero/Visuals/Bulma/Component.fs)]
5. Bulma CSS Class names [[src](https://github.com/BryanWilhite/Songhay.Modules.Bolero/blob/main/Songhay.Modules.Bolero/Visuals/Bulma/CssClass.fs)]
6. Bulma Element Visuals [[src](https://github.com/BryanWilhite/Songhay.Modules.Bolero/blob/main/Songhay.Modules.Bolero/Visuals/Bulma/Element.fs)]
7. Bulma Form Element Visuals [[src](https://github.com/BryanWilhite/Songhay.Modules.Bolero/blob/main/Songhay.Modules.Bolero/Visuals/Bulma/Form.fs)]
8. Bulma Layout Visuals [[src](https://github.com/BryanWilhite/Songhay.Modules.Bolero/blob/main/Songhay.Modules.Bolero/Visuals/Bulma/Layout.fs)]
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](https://bulma.io/documentation/components/pagination/)
- [the Bulma file form element](https://bulma.io/documentation/form/file/)
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](https://bulma.io/documentation/components/navbar/#navbar-burger) and its dropdown menu, the following JavaScript is needed:
```javascript
(() => {
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](https://bulma.io/documentation/components/navbar/#navbar-menu).
## the ‘studio floor’ for this Solution
`Songhay.Modules.Bolero`
The `Songhay.StudioFloor.Client` project [[GitHub](https://github.com/BryanWilhite/Songhay.Modules.Bolero/tree/main/Songhay.StudioFloor.Client)] has at least two purposes:
1. demonstrate how the [Bulma](https://bulma.io/) components and elements look and operate
2. provide a “reference” SCSS and Typescript `npm` pipeline
🐙🐈[BryanWilhite](https://github.com/BryanWilhite)