Tanguy Frageul's portoflio
Using mdx in Frosti

Using mdx in Frosti

Fri Jul 12 2024
3 minutes
tech Frosti Blog Project
297 words

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 /blog and /page folders. Write something under the document properties (frontmatter):

ASTRO
1
2
3
4
5
6
7
8
9
import Collapse from "../../components/blog/collapse.astro"; import Diff from
"../../components/blog/diff.astro"; import Error from
"../../components/blog/error.astro"; import Info from
"../../components/blog/info.astro"; import Kbd from
"../../components/blog/kbd.astro"; import Success from
"../../components/blog/success.astro"; import Warning from
"../../components/blog/warning.astro"; import TimeLine from
"../../components/page/TimeLine.astro"; import LinkCard from
"../../components/page/LinkCard.astro";

Example#

Collapse#

This is an example text.

This is the hidden content!

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

Diff#

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

Error#

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

Warning#

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

Message#

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

Success#

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

Kbd#

Ctrl + C to copy the text.

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

TimeLine#

  • First Macintosh computer
  • iMac
  • iPod
  • iPhone
  • Apple Watch
ASTRO
1
2
3
4
5
6
7
8
9
<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#

Frosti

Frosti

My blog project!

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