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 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
Prop | Description | type |
---|---|---|
title | Window title of the terminal. | String |
runline | Commandline, if you hate the name, make a pullrequest. | String |
nowrap | Chooses 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
Prop | Description | type |
---|---|---|
question | Question / Title of the flashcard. | String |