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):
import Collapse from "../../components/mdx/Collapse.astro";
import Diff from "../../components/mdx/Diff.astro";
import Error from "../../components/mdx/Error.astro";
import Info from "../../components/mdx/Info.astro";
import Kbd from "../../components/mdx/Kbd.astro";
import Success from "../../components/mdx/Success.astro";
import Warning from "../../components/mdx/Warning.astro";
import TimeLine from "../../components/mdx/TimeLine.astro";
import LinkCard from "../../components/mdx/LinkCard.astro";Example
Collapse
This is an example text.
This is the hidden content!
<Collapse title="This is an example text.">
This is the hidden content!
</Collapse>Diff
<Diff r="/image/r.png" l="/image/l.png" />Error
Maybe something went wrong?
<Error>Maybe something went wrong? </Error>Warning
Hey! Watch out for potholes!
<Warning>Hey! Watch out for potholes! </Warning>Message
It’s just a message.
<Info>It's just a message. </Info>Success
Congratulations on your successful deployment!
<Success>Congratulations on your successful deployment! </Success>Kbd
Ctrl + C to copy the text.
<Kbd>Ctrl</Kbd> + <Kbd>C</Kbd> to copy the text.TimeLine
<TimeLine
items={[
{ year: "1984", event: "First Macintosh computer" },
{ year: "1998", event: "iMac" },
{ year: "2001", event: "iPod" },
{ year: "2007", event: "iPhone" },
{ year: "2015", event: "Apple Watch" },
]}
/>LinkCard
<LinkCard
title="Frosti"
desc="My blog project!"
url="https://github.com/EveSunMaple/Frosti"
img="/view.png"
/> Thanks for reading!