EPS Mountain Top ⛰️
Using mdx in Frosti

Using mdx in Frosti

Fri Jul 12 2024
 
tech   Frosti   Blog   Project  

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 in 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="/r.png" l="/l.png"></Diff>

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

  • 1984
    First Macintosh computer
  • iMac
    1998
  • 2001
    iPod
  • iPhone
    2007
  • 2015
    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"
/>