Editing MDX Components (in GitHub)

Note: We encourage using TinaCMS to make content changes so you can take advantage of live preview and branch/PR management.
See the wiki how to edit rules in TinaCMS.

If you notice any issues when editing in TinaCMS, feel free to YakShaver it 🐂

Component index

• boxEmbed
• imageEmbed
• youtubeEmbed
• emailEmbed

Note: Headings, lists, tables and code blocks are still written in normal Markdown.

💡 Tip: The content inside body={<></>} supports Markdown - you can make text bold, italic, add lists, or links.

---

boxEmbed

Use this to show a box for tips, notes, or examples.

Available box types (variant):

• greybox - general information
• highlight - yellow highlight box
• info - informational tip with icon
• todo - red "todo" box
• china - box with a China flag icon
• codeauditor - used for CodeAuditor promotion
• warning - use with caution
• tips - helpful hint or best practice

Example:

<boxEmbed
  style="greybox"
  body={<>
    Hi Bob,

    Cleaning my inbox...
    Checked and this task was already done a few months ago
  </>}
  figurePrefix="good"
  figure="Informing a task was already done"
/>

Screenshot

💡 Tip: Change style="greybox" to highlight, info, etc. to change the box type.

---

imageEmbed

Use this to add images with captions and control the size.

Options:

• size can be small, medium, or large
• showBorder can be true or false

Example:

<imageEmbed
  alt="Team working together"
  size="large"
  showBorder={false}
  figurePrefix="none"
  figure="Example caption"
  src="/uploads/rules/rule/example.jpg"
/>

Screenshot

💡 Tip: When using an internal image, the path should follow this format: /uploads/rules/{rule-folder}/{image-name}

---

youtubeEmbed

Use this to embed a Youtube video.

Example:

<youtubeEmbed
  url="https://www.youtube.com/embed/0ugMkda9IBw"
  description={"Video: This Will Make You Better than 99% ChatGPT Users (6 min)"}
/>

Screenshot

---

emailEmbed

Use this when you want to show a formatted example email template.

Example:

<emailEmbed
  from="Adam Cogan"
  to="XXX"
  cc="YYY"
  bcc="ZZZ"
  subject="{{EMAIL SUBJECT}}"
  body={<>
    ## Hi XXX,

    This is an example email body that shows how to format emails in rules.
  </>}
  figurePrefix="good"
  figure="Nice email template"
/>

Screenshot