How do I use different CSS files in Bolero pages?

128 views Asked by At

I am new to Bolero. I need two separate layouts both with a separate menu system - one for "normal" web pages, the other for a CMS. That means using two different css files.

Is it possible to have two Elmish loops to achieve that? If not, what then? I have tried to utilise two Elmish loops, but the CMS loop does not work. Visual Studio signals no error, but the CMS page gets me back to the base as if there was something wrong with the routing (which certainly is).

See below for parts of my code, but you will probably need much more - the complete code is available on my GitHub - the CMS system is only simulated there, it is to be coded later.

member this.Configure(app: IApplicationBuilder, env: IWebHostEnvironment) =
       app
           .UseAuthentication()
           .UseRemoting()    
           .MapWhen(
               (fun ctx -> ctx.Request.Path.Value.StartsWith "/rozcestnikCMS"),
               (fun app ->
                       app
                           .UseBlazorFrameworkFiles()
                           .UseStaticFiles()
                           .UseRouting()
                           .UseEndpoints(fun endpoints ->
                                                        endpoints.MapBlazorHub() |> ignore
                                                        endpoints.MapFallbackToBolero(IndexCMS.page) |> ignore)
                       |> ignore
               )
               )
           .UseBlazorFrameworkFiles()
           .UseStaticFiles()
           .UseRouting()            
           .UseEndpoints(fun endpoints ->
               endpoints.MapBlazorHub() |> ignore
               endpoints.MapFallbackToBolero(Index.page) |> ignore)
       |> ignore

Index.page


let page = doctypeHtml {
   head {
          //some code
   }
   body {        
       div { attr.id "generalLayout"; rootComp<Client.Controller.MyApp> }
       boleroScript
   }
}

IndexCMS.page


let page = doctypeHtml {
   head {
      //some code
   }
   body {        
       div { attr.id "generalLayout"; rootComp<Client.ControllerCMS.MyCMSApp> }
       boleroScript
   }
}

Controller.fs


type MyApp() =
   inherit ProgramComponent<Model, Message>()

   override this.Program =
       let remote : RemoteServices =
           {
               login = this.Remote<Login.RemoteService>()
           }
       let init _ = initModel, initCmd
       let update message model = update remote message model
       Program.mkProgram init update view
       |> Program.withRouter router

ControllerCMS.fs


type MyCMSApp() =
   inherit ProgramComponent<Model, Message>()

   override this.Program =        
       let init _ = 
           initModel, Cmd.none
       Program.mkProgram init update view
       |> Program.withRouter router

EDIT 25-06-2022

In Blazor, the problem with different css styles can be dealt with this way. Is it possible to use the same approach in Bolero or not?

0

There are 0 answers