maud - v1.0.0

maud/components

Customizable component configuration for rendering Markdown into Lustre elements.

This module defines the Components type, a record of view functions that control how each Markdown construct is rendered. Use default() for standard HTML output, or override individual components to apply custom styling.

Usage

import maud/components

// Use defaults
let c = components.default()

// Override specific components via piping
let c =
  components.default()
  |> components.h1(fn(_id, children) { html.h1([attribute.class("title")], children) })
  |> components.p(fn(children) { html.p([attribute.class("body")], children) })

Types

Alignment

</>

Text alignment for table cells.

pub type Alignment {
  Left
  Center
  Right
}

Constructors 

  • Left

    Left-aligned text (the default for most table cells).

  • Center

    Center-aligned text.

  • Right

    Right-aligned text.

Components

</>

A record of view functions that control how each Markdown element is rendered.

Components are rendered bottom-up: children are rendered first, then passed to the parent component function as a List(Element(a)). When implementing a custom component, you must pass the children into the element you return, otherwise they will not appear in the output.

pub type Components(a) {
  Components(
    a: fn(String, option.Option(String), List(element.Element(a))) -> element.Element(
      a,
    ),
    blockquote: fn(List(element.Element(a))) -> element.Element(a),
    checkbox: fn(Bool) -> element.Element(a),
    code: fn(option.Option(String), List(element.Element(a))) -> element.Element(
      a,
    ),
    del: fn(List(element.Element(a))) -> element.Element(a),
    em: fn(List(element.Element(a))) -> element.Element(a),
    footnote: fn(Int, List(element.Element(a))) -> element.Element(
      a,
    ),
    h1: fn(String, List(element.Element(a))) -> element.Element(a),
    h2: fn(String, List(element.Element(a))) -> element.Element(a),
    h3: fn(String, List(element.Element(a))) -> element.Element(a),
    h4: fn(String, List(element.Element(a))) -> element.Element(a),
    h5: fn(String, List(element.Element(a))) -> element.Element(a),
    h6: fn(String, List(element.Element(a))) -> element.Element(a),
    hr: fn() -> element.Element(a),
    img: fn(String, String, option.Option(String)) -> element.Element(
      a,
    ),
    li: fn(List(element.Element(a))) -> element.Element(a),
    mark: fn(List(element.Element(a))) -> element.Element(a),
    ol: fn(option.Option(Int), List(element.Element(a))) -> element.Element(
      a,
    ),
    p: fn(List(element.Element(a))) -> element.Element(a),
    pre: fn(List(element.Element(a))) -> element.Element(a),
    strong: fn(List(element.Element(a))) -> element.Element(a),
    table: fn(List(element.Element(a))) -> element.Element(a),
    tbody: fn(List(element.Element(a))) -> element.Element(a),
    td: fn(Alignment, List(element.Element(a))) -> element.Element(
      a,
    ),
    th: fn(Alignment, List(element.Element(a))) -> element.Element(
      a,
    ),
    thead: fn(List(element.Element(a))) -> element.Element(a),
    tr: fn(List(element.Element(a))) -> element.Element(a),
    ul: fn(List(element.Element(a))) -> element.Element(a),
  )
}

Constructors

Values

a

</> 
pub fn a(
  components: Components(a),
  view: fn(
    String,
    option.Option(String),
    List(element.Element(a)),
  ) -> element.Element(a),
) -> Components(a)

Set the a component used for links.

The first argument is the link href, the second is an optional title, and the third is the list of children elements.

Examples

components.default()
|> components.a(fn(href, _title, children) {
  html.a([attribute.href(href), attribute.class("link")], children)
})

blockquote

</> 
pub fn blockquote(
  components: Components(a),
  blockquote: fn(List(element.Element(a))) -> element.Element(a),
) -> Components(a)

Set the blockquote component used for block quotes.

Examples

components.default()
|> components.blockquote(fn(children) {
  html.blockquote([attribute.class("quote")], children)
})

checkbox

</> 
pub fn checkbox(
  components: Components(a),
  checkbox: fn(Bool) -> element.Element(a),
) -> Components(a)

Set the checkbox component used for task list checkboxes.

The first argument indicates whether the checkbox is checked.

code

</> 
pub fn code(
  components: Components(a),
  code: fn(option.Option(String), List(element.Element(a))) -> element.Element(
    a,
  ),
) -> Components(a)

Set the code component used for inline code and code blocks.

The first argument is the optional language identifier (e.g. Some("gleam") for fenced code blocks with a language tag, None for inline code).

Examples

components.default()
|> components.code(fn(language, children) {
  case language {
    option.Some(lang) ->
      html.code([attribute.class("lang-" <> lang)], children)
    option.None -> html.code([attribute.class("code")], children)
  }
})

default

</> 
pub fn default() -> Components(a)

Return the default components, rendering each Markdown element as its corresponding HTML element without additional attributes or styling.

Examples

let c = components.default()

del

</> 
pub fn del(
  components: Components(a),
  del: fn(List(element.Element(a))) -> element.Element(a),
) -> Components(a)

Set the del component used for strikethrough text.

Examples

components.default()
|> components.del(fn(children) {
  html.del([attribute.class("strikethrough")], children)
})

em

</> 
pub fn em(
  components: Components(a),
  em: fn(List(element.Element(a))) -> element.Element(a),
) -> Components(a)

Set the em component used for emphasized (italic) text.

footnote

</> 
pub fn footnote(
  components: Components(a),
  footnote: fn(Int, List(element.Element(a))) -> element.Element(
    a,
  ),
) -> Components(a)

Set the footnote component used for footnote references.

The first argument is the footnote number, the second is the children elements.

Note: the default implementation renders a forward reference only (no back-link from the footnote body to the reference site).

h1

</> 
pub fn h1(
  components: Components(a),
  h1: fn(String, List(element.Element(a))) -> element.Element(a),
) -> Components(a)

Set the h1 component used for level 1 headings.

The first argument is the heading id, the second is the children elements.

Examples

components.default()
|> components.h1(fn(id, children) {
  html.h1([attribute.id(id), attribute.class("heading")], children)
})

h2

</> 
pub fn h2(
  components: Components(a),
  h2: fn(String, List(element.Element(a))) -> element.Element(a),
) -> Components(a)

Set the h2 component used for level 2 headings.

The first argument is the heading id, the second is the children elements.

h3

</> 
pub fn h3(
  components: Components(a),
  h3: fn(String, List(element.Element(a))) -> element.Element(a),
) -> Components(a)

Set the h3 component used for level 3 headings.

The first argument is the heading id, the second is the children elements.

h4

</> 
pub fn h4(
  components: Components(a),
  h4: fn(String, List(element.Element(a))) -> element.Element(a),
) -> Components(a)

Set the h4 component used for level 4 headings.

The first argument is the heading id, the second is the children elements.

h5

</> 
pub fn h5(
  components: Components(a),
  h5: fn(String, List(element.Element(a))) -> element.Element(a),
) -> Components(a)

Set the h5 component used for level 5 headings.

The first argument is the heading id, the second is the children elements.

h6

</> 
pub fn h6(
  components: Components(a),
  h6: fn(String, List(element.Element(a))) -> element.Element(a),
) -> Components(a)

Set the h6 component used for level 6 headings.

The first argument is the heading id, the second is the children elements.

hr

</> 
pub fn hr(
  components: Components(a),
  hr: fn() -> element.Element(a),
) -> Components(a)

Set the hr component used for thematic breaks (horizontal rules).

img

</> 
pub fn img(
  components: Components(a),
  img: fn(String, String, option.Option(String)) -> element.Element(
    a,
  ),
) -> Components(a)

Set the img component used for images.

The first argument is the image URI, the second is the alt text extracted from the image’s inline content, and the third is an optional title.

li

</> 
pub fn li(
  components: Components(a),
  li: fn(List(element.Element(a))) -> element.Element(a),
) -> Components(a)

Set the li component used for list items.

mark

</> 
pub fn mark(
  components: Components(a),
  mark: fn(List(element.Element(a))) -> element.Element(a),
) -> Components(a)

Set the mark component used for highlighted text.

ol

</> 
pub fn ol(
  components: Components(a),
  ol: fn(option.Option(Int), List(element.Element(a))) -> element.Element(
    a,
  ),
) -> Components(a)

Set the ol component used for ordered lists.

The first argument is an optional start number, the second is the list of children elements.

p

</> 
pub fn p(
  components: Components(a),
  p: fn(List(element.Element(a))) -> element.Element(a),
) -> Components(a)

Set the p component used for paragraphs.

pre

</> 
pub fn pre(
  components: Components(a),
  pre: fn(List(element.Element(a))) -> element.Element(a),
) -> Components(a)

Set the pre component used for preformatted code blocks.

strong

</> 
pub fn strong(
  components: Components(a),
  strong: fn(List(element.Element(a))) -> element.Element(a),
) -> Components(a)

Set the strong component used for bold text.

table

</> 
pub fn table(
  components: Components(a),
  table: fn(List(element.Element(a))) -> element.Element(a),
) -> Components(a)

Set the table component used for tables.

tbody

</> 
pub fn tbody(
  components: Components(a),
  tbody: fn(List(element.Element(a))) -> element.Element(a),
) -> Components(a)

Set the tbody component used for table body groups.

td

</> 
pub fn td(
  components: Components(a),
  td: fn(Alignment, List(element.Element(a))) -> element.Element(
    a,
  ),
) -> Components(a)

Set the td component used for table data cells.

The first argument is the column alignment, the second is the list of children elements.

th

</> 
pub fn th(
  components: Components(a),
  th: fn(Alignment, List(element.Element(a))) -> element.Element(
    a,
  ),
) -> Components(a)

Set the th component used for table header cells.

The first argument is the column alignment, the second is the list of children elements.

thead

</> 
pub fn thead(
  components: Components(a),
  thead: fn(List(element.Element(a))) -> element.Element(a),
) -> Components(a)

Set the thead component used for table header groups.

tr

</> 
pub fn tr(
  components: Components(a),
  tr: fn(List(element.Element(a))) -> element.Element(a),
) -> Components(a)

Set the tr component used for table rows.

ul

</> 
pub fn ul(
  components: Components(a),
  ul: fn(List(element.Element(a))) -> element.Element(a),
) -> Components(a)

Set the ul component used for unordered lists.

✨ Search Document