Fri Jul 12 2024

438 Words · 4 Minutes

Using mdx in Frosti

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

ASTRO

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

Collapse Link to Collapse

This is an example text.

This is the hidden content!

ASTRO

1
2

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

Diff Link to Diff

ASTRO

<Diff r="/image/right.png" l="/image/left.png" />

Error Link to Error

Maybe something went wrong?

ASTRO

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

Warning Link to Warning

Hey! Watch out for potholes!

ASTRO

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

Message Link to Message

It’s just a message.

ASTRO

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

Success Link to Success

Congratulations on your successful deployment!

ASTRO

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

Kbd Link to Kbd

Ctrl + C to copy the text.

ASTRO

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

TimeLine Link to TimeLine

1984

First Macintosh computer
iMac

1998
2001

iPod
iPhone

2007
2015

Apple Watch

ASTRO

<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

Hackastro

My blog project!

Learn more

ASTRO

<LinkCard
  title="Hackastro"
  desc="My blog project!"
  url="https://github.com/JackTheMico/hackastro"
  img="/image/view.png"
/>