Content

let prosePage =
    DocumentationPage.create "content-prose" "Content"
    |> DocumentationPage.withDescription "Typed prose blocks."
    |> DocumentationPage.withSections [
        DocumentationSection.create "install" "Install the package" [
            p { "Compose readable documentation from typed HTML." }
            ol {
                li { "Add the package" }
                li { "Configure assets" }
                li { "Render the document" }
            } ] ]

let tablePage =
    DocumentationPage.create "content-table" "Builder comparison" |> DocumentationPage.withDescription "Compact structured data." |> DocumentationPage.withSections [
        DocumentationSection.create "builders" "Builders" [
            div {
                _class "overflow-x-auto rounded-xl border border-[var(--fve-border)]"
                table {
                    thead { tr { th { "Builder" }; th { "Purpose" } } }
                    tbody {
                        tr { td { "DocumentationPage.create" }; td { "Guides" } }
                        tr { td { "DocumentationPage.withLayout Canvas" }; td { "Product review" } }
                    }
                }
            } ] ]

let calloutPage =
    DocumentationPage.create "content-callout" "Security" |> DocumentationPage.withDescription "Important implementation guidance." |> DocumentationPage.withSections [
        DocumentationSection.create "boundary" "Trust boundary" [
            Callout.create "Security" [ p { "Render trusted raw content only at an application-defined boundary." } ]
            |> Callout.render ] ]

let customPage =
    DocumentationPage.create "content-custom" "Output" |> DocumentationPage.withDescription "Code and product-owned HTML." |> DocumentationPage.withSections [
        DocumentationSection.create "output" "Output" [
            CodeBlock.create "fsharp" "div { _class \"notice\"; \"Saved\" }" |> CodeBlock.render
            div { _class "docs-notice-preview"; "Rendered output" } ] ]