Note

Creating a layout via F#, is the recommended way when working on complex layout or releasing it as an NPM package.

  • Create a folder to host your code Nacara.Layout.Custom.

    mkdir Nacara.Layout.Custom && cd Nacara.Layout.Custom
  • Create an FSharp project Nacara.Layout.Custom.fsproj

    dotnet new library -lang f#
  • Add Nacara.Core to your project

    dotnet add package Nacara.Core

    By default you have access to Fable.React, if you prefer Feliz you can add it

    dotnet add package Feliz
  • Change Library.fs content to:

    module Layout
    
    open Fable.Core.JsInterop
    open Nacara.Core.Types
    open Fable.React
    open Fable.React.Props
    
    // Your render function, it is responsible to transform a page into HTML
    let render (rendererContext : RendererContext) (pageContext : PageContext) =
        promise {
            let! pageContent =
                rendererContext.MarkdownToHtml(
                    pageContext.Content,
                    pageContext.RelativePath
                )
    
            return div [ ]
                [
                    str "Hello, from your custom layout"
                    br [ ]
                    div [ DangerouslySetInnerHTML { __html = pageContent} ]
                        [ ]
                ]
        }
    
    // This is how we expose layouts to Nacara
    exportDefault
        {
            Renderers = [|
                {
                    Name = "my-layout"
                    Func = render
                }
            |]
            Dependencies = [| |]
        }
  • Compile your project to JavaScript using Fable.

    If you don't have Fable installed in your project you need to install it:

    dotnet new tool-manifest
    dotnet tool install fable

    Launch the compilation:

    dotnet fable --outDir dist --watch
  • Register your layout in the nacara.config.json

    {
        // ...
        "layouts": [
            "nacara-layout-standard",
            "./Nacara.Layout.Custom/dist/Library.js"
        ]
    }

You can find type documentation in the API section.

Here are the most important topics when working with custom layouts: