Using mdx in Frosti

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";

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

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

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

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

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

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

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

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
/>

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