Frosti 🧊
Using mdx in Frosti

Using mdx in Frosti

Fri Jul 12 2024
4 minutes
tech Frosti Blog Project
441 words

Preface Link to 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 Link to Main text

Getting started Link to Getting started

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

Introducing Link to 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 Link to Example

Collapse Link to 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 Link to Diff

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

Error Link to Error

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

Warning Link to Warning

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

Message Link to Message

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

Success Link to Success

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

Kbd Link to Kbd

Ctrl + C to copy the text.

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

TimeLine Link to 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 Link to 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"
/>

Telegram
Douban
Reddit
Pocket