feat: add micro guide about markdown in WelcomeModal

master
Katja Lutz 2 years ago
parent 37020b0722
commit 6e023cd17e

@ -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 = () => (

@ -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

Loading…
Cancel
Save