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

• introEmbed
• asideEmbed
• imageEmbed
• figureEmbed
• 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.

---

introEmbed

Use this for the first section of a rule - the short paragraph at the top that introduces the topic.

Example:

<introEmbed
  body={<>
    The best way to get up and running with ChatGPT is by using a cheat sheet. Check out our [ChatGPT Cheat Sheet](/chatgpt-cheat-sheet).

    In ChatGPT prompt engineering, various elements play a critical role in shaping the user's prompt and obtaining the desired output. These elements are role, result, intent, context, and constraint.
  </>}
/>

Screenshot
Figure: The content of <introEmbed /> appears as the 'Show blurb' on the category page

---

asideEmbed

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:

<asideEmbed
  variant="greybox"
  body={<>
    Hi Bob,

    Cleaning my inbox...
    Checked and this task was already done a few months ago
  </>}
  figureEmbed={{
    preset: "goodExample",
    figure: "Good example - Informing a task was already done",
    shouldDisplay: true
  }}
/>

Screenshot

💡 Tip: Change variant="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}
  figureEmbed={{ preset: "default", figure: "Figure: Example caption", shouldDisplay: true }}
  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}

---

figureEmbed

Use this to add a caption or label under an image or box.

Caption styles:

• default - normal caption
• badExample - ❌ bad example
• okExample - 😐 okay example
• goodExample - ✅ good example

Example:

<figureEmbed figureEmbed={{
  preset: "goodExample",
  figure: "Figure: Good example - A GPT directory on the SSW intranet home page",
  shouldDisplay: true
}}/>

Screenshot

---

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.
  </>}
  figureEmbed={{ preset: "goodExample", figure: "Good example - Nice email template", shouldDisplay: true }}
/>

Screenshot