Heading

Updated on August 22, 2024

BaleadaProseHeading is Baleada Prose's version of Markdown headings. It does three things that you typically want from a heading:

1. It communicates with the top-level layout (BaleadaProseLayout, to be specific) to add itself to a table of contents.
2. It renders its text inside an a, so that the entire heading becomes a clickable link.
3. It renders a copy-to-clipboard button so the end user can easily copy the link directly to that heading.

Example

Markdown

  :::
  ### Find me in the table of contents!
  :::

Rendered

Find me in the table of contents!

Props

Structure

Here's the structure of BaleadaProseHeading's markup, written in Pug for simplicity:

h1.baleada-prose-heading // h1 gets replaced with whatever heading level you actually use
  a.contents.descendant1Classes href="..." // The anchor's href is a slug of the heading's text
    slot // Your content slots in here
  InterfaceButton.descendant2Classes name="Copy link to heading" // Only gets rendered when canCopy is true
    svg.descendant3Classes // Link icon

API design compliance

[WIP]

Edit doc on GitHub