Back to home

MDX Components

March 04, 2021

Mathias Bøe

Lesesalen has some unique components that allow you to express yourself further when writing notes. This is a collection of them so you can try them out and understand how they work.

Terminal

The terminal component is used for everything that you need to type into the terminal (you can also use it as a way to display output or anything else for that matter).

This is a terminal with a title

Just some standard console output lmao Just some standard console output lmao Just some standard console output lmao Just some standard console output lmao Just some standard console output lmao Just some standard console output lmao Just some standard console output lmao

lesesalen

@

 ~

(master)

 > 

This is a terminal with a title

Just some standard console output lmao Just some standard console output lmao Just some standard console output lmao Just some standard console output lmao Just some standard console output lmao Just some standard console output lmao Just some standard console output lmao

lesesalen

@

 ~

(master)

 > 

Terminal

this python script is so cool whoo

lesesalen

@

 ~

(master)

 > ./time_to_catch_python.py

This is a terminal with a title and a command

this python script is so cool whoo

lesesalen

@

 ~

(master)

 > ./time_to_catch_python.py

How to use it

You can simply write the code below into your .mdx.mdx file and you are all set.

import Terminal from "../../../src/components/noteComponents/Terminal.tsx"

<Terminal nowrap title="this is not working">
Just some standard console output lmao ....
</Terminal>

<Terminal title="this is not working">
Just some standard console output lmao
</Terminal>

<Terminal runline="./time_to_catch_python.py">
this python script is so cool whoo
</Terminal>

<Terminal title="This is a terminal with a title and a command" runline="./time_to_catch_python.py">
  this python script is so cool whoo
</Terminal>

Props

PropDescriptiontype
titleWindow title of the terminal.String
runlineCommandline, if you hate the name, make a pullrequest.String
nowrapChooses if the text should wrap or not.Boolean

FlashCards

This component works as a quiz/flashcard. You can add a question and an answer, and the user can click the button to show the answer. The question will not break on other characters than whitespace, this is due to some edge cases where code might be in the box, in that case you don’t necessarily want to break the line. The drawback here is that you have to scroll to press the button to show answer. This is probably an easy fix if you want to submit a PR on it.

The answer will always force a break to fit within the div. This is simply because answers should be plain text and not code imo. This is also subject to change.

Speil, speil på veggen der, hvem er vakrest i landet her?

Superlangtekstsuperlangtekstsuperlangtekst superlangtekst superlangtekstsuperlangtekst superlangtekstsuperlangtekstsuperlangtekstsuperlangtekst superlangtekstsuperlangtekstsuperlangtekstsuperlangtekstsuperlangtekst?

Superlangtekstsuperlangtekstsuperlangtekst superlangtekst superlangtekstsuperlangtekst superlangtekstsuperlangtekstsuperlangtekstsuperlangtekst superlangtekstsuperlangtekstsuperlangtekst superlangtekstsuperlangtekst?

How to use it

import FlashCard from "../../../src/components/noteComponents/FlashCard.tsx";

<FlashCard
  question={"Speil, speil på veggen der, hvem er vakrest i landet her?"}
>
  Ikkje du i alle fall..
</FlashCard>;

Props

PropDescriptiontype
questionQuestion / Title of the flashcard.String