From 2ee0672ea569119f96410a5a81d5854a8cb9a0d4 Mon Sep 17 00:00:00 2001
From: Katja Lutz <mail@katjalutz.ch>
Date: Tue, 28 Jun 2022 18:08:30 +0200
Subject: [PATCH] feat: add installation guide to WelcomeModal and README

---
 README.md                       | 12 ++++++++
 src/components/WelcomeModal.tsx | 49 ++++++++++++++++++++++++++++++++-
 2 files changed, 60 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 8d01b5e..67b3af1 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,18 @@
 
 [<img height="100" src="./assets/icon-large.png"/>](https://rappli.ch)
 
+## Installation
+
+```bash
+npm install -g rappli
+```
+
+## Running it
+
+```bash
+DOMAIN=yourdomain.com rappli
+```
+
 ## Developing
 
 Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
diff --git a/src/components/WelcomeModal.tsx b/src/components/WelcomeModal.tsx
index 5fc2ac4..1e7c0db 100644
--- a/src/components/WelcomeModal.tsx
+++ b/src/components/WelcomeModal.tsx
@@ -618,7 +618,54 @@ const WelcomeModal: Component = (props) => {
                 label={<div>7. Kann Räppli lokal installiert werden?</div>}
                 alignCenter={false}
               >
-                test
+                <p class="!mt-0">
+                  Räppli kann lokal installiert werden, jedoch ist es für den
+                  Betrieb auf Servern optimiert. Das heisst: auch wenn du Räppli
+                  installiert hast, musst du deinen Webbrowser nutzen, um Räppli
+                  zu öffnen.
+                </p>
+                <p class="bg-slate-500/10 flex p-3 items-center gap-3 rounded">
+                  <WarningIcon class="w-auto h-6 inline mr-1" />{" "}
+                  <strong>
+                    Für die Installation sind grundlegende Kenntnisse im Umgang
+                    mit der Kommandozeile empfohlen!
+                  </strong>
+                </p>
+                <h3>Voraussetzungen:</h3>
+                <ul>
+                  <li>
+                    Installiere{" "}
+                    <a
+                      class="inline-flex items-center gap-1"
+                      href="https://nodejs.org/en/"
+                      {...externalLink}
+                    >
+                      nodejs {">"}= 18 <ExternalLinkIcon />
+                    </a>
+                  </li>
+                </ul>
+                <h3>Installation Räppli</h3>
+                <p>Führe folgende Befehle aus:</p>
+                <ul>
+                  <li>
+                    <pre>npm install -g rappli</pre>
+                  </li>
+                </ul>
+                <h3>Räppli starten</h3>
+                <p>Führe folgenden Befehl aus, um Räppli zu starten</p>
+                <ul>
+                  <li>
+                    <pre>rappli</pre>
+                  </li>
+                  <li>
+                    Sobald die Meldung "Listening on port 3000" erscheint,
+                    kannst du dein lokales Räppli auf deinem Browser über{" "}
+                    <a href="http://localhost:3000" {...externalLink}>
+                      http://localhost:3000
+                    </a>{" "}
+                    erreichen.
+                  </li>
+                </ul>
               </AcordionItem>
 
               <AcordionItem