From 32eb0c7408282e8d32ea055f3a2c74c742755e99 Mon Sep 17 00:00:00 2001
From: Emma <emma@cyborggrizzly.com>
Date: Tue, 12 Mar 2024 19:54:51 -0600
Subject: [PATCH] ttcMD: Added line breaks to text elements

---
 app/help/[article]/page.tsx          |  4 +--
 components/ttcmd/index.tsx           |  6 ++++-
 md/help articles/How to use ttcMD.md | 38 ++++++++++++++++++++++++++++
 3 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/app/help/[article]/page.tsx b/app/help/[article]/page.tsx
index ef17903..632a01b 100644
--- a/app/help/[article]/page.tsx
+++ b/app/help/[article]/page.tsx
@@ -17,10 +17,10 @@ export default async function Help({
     <>
       <section className="heading">
         <h2 className="strapline">Help</h2>
-        <h1>How to use TTCMD</h1>
+        <h1>{decodeURIComponent(params.article).replace(".md", "")}</h1>
       </section>
       <section className="grid grid-cols-3 gap-x-8 gap-y-6 my-6">
-        <div className="col-span-2 card">
+        <div className="col-span-2">
           <Suspense>
             <TTCMD body={body} />
           </Suspense>
diff --git a/components/ttcmd/index.tsx b/components/ttcmd/index.tsx
index 972040f..1c70992 100644
--- a/components/ttcmd/index.tsx
+++ b/components/ttcmd/index.tsx
@@ -141,7 +141,11 @@ function render(token: Token, usedIds: string[]) {
         </Poppable>
       );
     case "text":
-      return <span>{token.content}</span>;
+      return (
+        <span className="whitespace-pre-wrap">
+          {token.content.replaceAll("\\n", "\n")}
+        </span>
+      );
     case "p":
       return (
         <div className="p">
diff --git a/md/help articles/How to use ttcMD.md b/md/help articles/How to use ttcMD.md
index f9680ed..866355f 100644
--- a/md/help articles/How to use ttcMD.md	
+++ b/md/help articles/How to use ttcMD.md	
@@ -7,6 +7,7 @@
     - [Pop-outs](#pop-outs)
   - [Block-level Elements](#block-level-elements)
     - [Accordions](#accordions)
+    - [Card](#card)
 
 # How do you use ttcMD?
 
@@ -81,4 +82,41 @@ I can include a [link](#accordions), or *italic* and **bold** text.
 I can even include a card, like this one
 ]]
 [/accordion]
+/[]
+
+### Card
+
+Cards are just neat boxes. They can hold any markdown within them, but not other cards (it looks bad).
+
+[][][]
+```
+[[
+Card text!
+
+This is a real wild thing! Look, an accordion!
+
+[accordion Hello, am accordion!]
+super secret! I'll never tell!
+[/accordion]
+]]
+```
+[[
+Card text!
+
+This is a real wild thing! Look, an accordion!
+
+[accordion Hello, am accordion!]
+
+Never gonna give you up,\n
+Never gonna let you down,\n
+Never gonna run around\n
+And desert you.
+
+Never gonna make you cry,\n
+Never gonna say good-bye,\n
+Never gonna tell a lie\n
+And hurt you.
+
+[/accordion]
+]]
 /[]
\ No newline at end of file