From 6e023cd17e68a1d649ce0bb65d47e2bed10314e8 Mon Sep 17 00:00:00 2001
From: Katja Lutz <mail@katjalutz.ch>
Date: Tue, 28 Jun 2022 20:06:04 +0200
Subject: [PATCH] feat: add micro guide about markdown in WelcomeModal

---
 src/components/Markdown.tsx     |  2 +-
 src/components/WelcomeModal.tsx | 46 ++++++++++++++++++++++++++++++++-
 2 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/src/components/Markdown.tsx b/src/components/Markdown.tsx
index d649a53..4580ef5 100644
--- a/src/components/Markdown.tsx
+++ b/src/components/Markdown.tsx
@@ -13,7 +13,7 @@ import rehypeStringify from "rehype-stringify";
 import remarkGfm from "remark-gfm";
 import HelpIcon from "~icons/carbon/help";
 
-const markdownHelpUrl =
+export const markdownHelpUrl =
   "https://drdanielappel.de/tipps-tools/markdown-eine-einfach-zu-erlernende-auszeichnungssprache/#cmtoc_anchor_id_0";
 
 export const MarkdownHelpLabel: Component = () => (
diff --git a/src/components/WelcomeModal.tsx b/src/components/WelcomeModal.tsx
index 8908671..0a13a17 100644
--- a/src/components/WelcomeModal.tsx
+++ b/src/components/WelcomeModal.tsx
@@ -33,6 +33,7 @@ import {
   shuffle,
 } from "~/util";
 import { capitalize } from "froebel";
+import { markdownHelpUrl } from "./Markdown";
 
 export const description =
   "Räppli ist eine freie Web App zur Erstellung von Schweizerischen Rechnungen inklusive QR-Code. Erfasse deine Rechnungspositionen und erhalte unmittelbar eine druckbare Rechnung.";
@@ -632,7 +633,50 @@ const WelcomeModal: Component = (props) => {
                 }
                 alignCenter={false}
               >
-                test
+                <p class="!mt-0 mb-1">
+                  Du kannst deinen Text formatieren, indem du ihn mit ganz
+                  bestimmten Zeichen versiehst! Welche Zeichen das sind, wird
+                  durch den "Markdown"-Standard definiert.
+                </p>
+                <p class="mt-1">
+                  Erfahre{" "}
+                  <a
+                    href={markdownHelpUrl}
+                    class="inline-flex items-center gap-1"
+                    {...externalLink}
+                  >
+                    hier <ExternalLinkIcon />
+                  </a>{" "}
+                  wie Markdown im Detail funktioniert!
+                </p>
+
+                <strong>Kurzbeispiel:</strong>
+                <div class="prose-sm">
+                  <div class="grid grid-cols-2">
+                    <p>Dein Text:</p>
+                    <pre>
+                      {["- *Pizza*", "- **Gemüse**", "- ***Salat***"].join(
+                        "\n"
+                      )}
+                    </pre>
+                    <p>Ausgabe:</p>
+                    <div class="border border-slate-200">
+                      <ul>
+                        <li>
+                          <i>Pizza</i>
+                        </li>
+                        <li>
+                          <strong>Gemüse</strong>
+                        </li>
+                        <li>
+                          <i>
+                            <strong>Salat</strong>
+                          </i>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
               </AccordionItem>
 
               <AccordionItem