Using mdx in Frosti

Preface

This article describes how to use the components provided by Frosti in mdx to realize the functions that can’t be realized by normal md.

Main text

Getting started

First you need to create an mdx file, which is as simple as changing the extension to .mdx.

Introducing

The components provided by Frosti are placed in the /mdx folders. Write something under the document properties (frontmatter):

1
import Collapse from "../../components/mdx/Collapse.astro";
2
import Diff from "../../components/mdx/Diff.astro";
3
import Error from "../../components/mdx/Error.astro";
4
import Info from "../../components/mdx/Info.astro";
5
import Kbd from "../../components/mdx/Kbd.astro";
6
import Success from "../../components/mdx/Success.astro";
7
import Warning from "../../components/mdx/Warning.astro";
8
import TimeLine from "../../components/mdx/TimeLine.astro";
9
import LinkCard from "../../components/mdx/LinkCard.astro";

Example

Collapse

This is an example text.

This is the hidden content!

1
<Collapse title="This is an example text.">
2
  This is the hidden content!
3
</Collapse>

Diff

1
<Diff l="/image/l.png" r="/image/r.png" />

Error

Maybe something went wrong?

1
<Error>Maybe something went wrong? </Error>

Warning

Hey! Watch out for potholes!

1
<Warning>Hey! Watch out for potholes! </Warning>

Message

It’s just a message.

1
<Info>It's just a message. </Info>

Success

Congratulations on your successful deployment!

1
<Success>Congratulations on your successful deployment! </Success>

Kbd

Ctrl + C to copy the text.

1
<Kbd>Ctrl</Kbd> + <Kbd>C</Kbd> to copy the text.

TimeLine

1984
First Macintosh computer
iMac
1998
2001
iPod
iPhone
2007
2015
Apple Watch

1
<TimeLine
2
  items={[
3
    { year: "1984", event: "First Macintosh computer" },
4
    { year: "1998", event: "iMac" },
5
    { year: "2001", event: "iPod" },
6
    { year: "2007", event: "iPhone" },
7
    { year: "2015", event: "Apple Watch" },
8
  ]}
9
/>

LinkCard

Frosti

My blog project!

Visit Frosti

1
<LinkCard
2
  title="Frosti"
3
  desc="My blog project!"
4
  url="https://github.com/EveSunMaple/Frosti"
5
  img="/logo.png"
6
/>

Thanks for reading!

Using mdx in Frosti

Fri Jul 12 2024

238 words · 2 minutes

Documentation Examples Frosti Blog Project