@ -2,9 +2,12 @@ import {
Component ,
Component ,
createEffect ,
createEffect ,
createMemo ,
createMemo ,
FlowComponent ,
onCleanup ,
onCleanup ,
onMount ,
onMount ,
JSX ,
useContext ,
useContext ,
splitProps ,
} from "solid-js" ;
} from "solid-js" ;
import LufraiLogo from "~icons/custom/lufrai-logo" ;
import LufraiLogo from "~icons/custom/lufrai-logo" ;
import AppIcon from "~icons/custom/icon" ;
import AppIcon from "~icons/custom/icon" ;
@ -33,14 +36,30 @@ import {
shuffle ,
shuffle ,
} from "~/util" ;
} from "~/util" ;
import { capitalize } from "froebel" ;
import { capitalize } from "froebel" ;
import { markdownHelpUrl } from "./Markdown" ;
import AgileCalculator from "./AgileCalculator" ;
export const description =
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." ;
"Räppli ist eine freie Web App zur Erstellung von Schweizerischen Rechnungen inklusive QR-Code. Erfasse deine Rechnungspositionen und erhalte unmittelbar eine druckbare Rechnung." ;
const externalLinkClass = "inline-flex items-center gap-1" ;
const ExternalLink : FlowComponent <
JSX . AnchorHTMLAttributes < HTMLAnchorElement >
> = ( p ) = > {
const [ props , rest ] = splitProps ( p , [ "children" ] ) ;
return (
< a class = { externalLinkClass } { ...externalLink } { ...rest } >
{ props . children }
< ExternalLinkIcon / >
< / a >
) ;
} ;
const WelcomeModal : Component = ( props ) = > {
const WelcomeModal : Component = ( props ) = > {
const [ localState , setLocalState , localStateMounted ] =
const [ localState , setLocalState , localStateMounted ] =
useContext ( LocalStoreContext ) ! ;
useContext ( LocalStoreContext ) ! ;
const [ AcordionItem ] = createAccordion ( ) ;
const [ Ac c ordionItem] = createAccordion ( ) ;
let subtitleEl : HTMLSpanElement = undefined ! ;
let subtitleEl : HTMLSpanElement = undefined ! ;
const isOpen = createMemo ( ( ) = > {
const isOpen = createMemo ( ( ) = > {
return localStateMounted ( ) && localState . showWelcome ;
return localStateMounted ( ) && localState . showWelcome ;
@ -134,7 +153,7 @@ const WelcomeModal: Component = (props) => {
< >
< >
Fredi Niklaus (
Fredi Niklaus (
< a
< a
class = "inline-flex items-center gap-1"
class = { externalLinkClass }
href = "https://www.remedyit.ch/"
href = "https://www.remedyit.ch/"
{ . . . externalLink }
{ . . . externalLink }
>
>
@ -229,7 +248,10 @@ const WelcomeModal: Component = (props) => {
< / a >
< / a >
< / div >
< / div >
< div class = "mt-16 flex flex-wrap gap-3 items-center justify-center" >
< div
class = "mt-16 flex flex-wrap gap-3 items-center justify-center"
id = "welcome-social"
>
< div class = "text-sm text-slate-600" > Teile es auf : < / div >
< div class = "text-sm text-slate-600" > Teile es auf : < / div >
< div
< div
class = "shareon flex flex-wrap items-center justify-center"
class = "shareon flex flex-wrap items-center justify-center"
@ -304,13 +326,40 @@ const WelcomeModal: Component = (props) => {
Wieso ist < span class = "text-swiss-red" > R ä ppli < / span > komplett { " " }
Wieso ist < span class = "text-swiss-red" > R ä ppli < / span > komplett { " " }
< span class = "text-swiss-red" > kostenlos < / span > ?
< span class = "text-swiss-red" > kostenlos < / span > ?
< / h2 >
< / h2 >
< p class = "text-xl font-light lead" >
Weil moderne Rechnungsstellung f ü r alle Menschen m ö glich sein
sollte !
< / p >
< p >
Jeder Selbstst ä ndige kommt wohl irgendwann an den Punkt , dass er
eine Rechnung schreiben muss . Doch eine moderne Rechnung zu
schreiben , die heutige Erwartungen erf ü llt , ist gar nicht so
einfach und braucht viel Zeit . So werden viele Selbstst ä ndige zum
Einsatz von komplexer und oftmals teurer "ERP" - Software oder zu
Outsourcing gedr ä ngt . Menschen die sich mit wenig Startkapital
selbstst ä ndig machen wollen , stehen vor einer schwierigen Wahl .
< / p >
< p >
Eines der wesentlichen Ziele von { " " }
< a href = "#welcome-lufrai" > Lufrai < / a > ist , Menschen dabei zu
unterst ü tzen aus eigener Kraft unabh ä ngig zu werden und ihrem
eigenen Lebenssinn zu folgen . { " " }
< strong >
< i > Befreie deine Stimme ! < / i >
< / strong >
< / p >
< p >
R ä ppli soll ein Beweis daf ü r darstellen , dass Selbstlosigkeit auch
ohne teure , zentralisierte , staatliche L ö sungen m ö glich ist . Der
gesamte Quellcode von R ä ppli steht offen verf ü gbar . { " " }
< a href = "#welcome-opensource" > Erfahre mehr < / a >
< / p >
< p >
< p >
Consectetur id magna labore commodo exercitation laboris est
Zu guter Letzt ist R ä ppli auch eine Referenzarbeit . Sie soll
laboris consectetur irure minim . Officia anim tempor adipisicing
zeigen was ich ( Katja ) als Web - Entwicklerin drauf habe . Denn im
irure labore tempor reprehenderit culpa consequat ea esse
m ü ndlichen Gespr ä ch verkaufe ich meine F ä higkeiten leider wie eine
exercitation . Consectetur labore velit nulla excepteur eiusmod sit
absolute Niete und wirke mit einer Gr ö sse von 1.9 Metern etwas
fugiat do proident . Ex non consectetur mollit dolor dolore Lorem
abschreckend . Verkauf ist nicht meine St ä rke .
ut et incididunt pariatur sunt deserunt tempor magna ullamco .
< / p >
< / p >
< / section >
< / section >
@ -321,7 +370,7 @@ const WelcomeModal: Component = (props) => {
< p >
< p >
Lufrai ist die Einzelfirma von { " " }
Lufrai ist die Einzelfirma von { " " }
< a
< a
class = "inline-flex items-center gap-2"
class = { externalLinkClass }
href = "https://lufrai.org/katjalutz"
href = "https://lufrai.org/katjalutz"
{ . . . externalLink }
{ . . . externalLink }
>
>
@ -331,7 +380,7 @@ const WelcomeModal: Component = (props) => {
f ü r eine unabh ä ngige , freie Schweiz ein und unterst ü tzt ihre
f ü r eine unabh ä ngige , freie Schweiz ein und unterst ü tzt ihre
souver ä nen Mitmenschen , das Steuer selbst in die Hand zu nehmen .
souver ä nen Mitmenschen , das Steuer selbst in die Hand zu nehmen .
< a
< a
class = "btn btn-sm inline-flex ml-3 items-center gap- 2 "
class = "btn btn-sm inline-flex ml-3 items-center gap- 1 "
href = "https://lufrai.org"
href = "https://lufrai.org"
{ . . . externalLink }
{ . . . externalLink }
>
>
@ -379,24 +428,47 @@ const WelcomeModal: Component = (props) => {
< section class = "mt-16" >
< section class = "mt-16" >
< h2 id = "welcome-patron" > Das Projekt unterst ü tzen < / h2 >
< h2 id = "welcome-patron" > Das Projekt unterst ü tzen < / h2 >
< p class = "text-xl font-light lead" >
Danke dass du das Projekt und damit auch den Fortbestand von
Lufrai unterst ü tzen m ö chtest !
< / p >
< h3 > Teilen < / h3 >
< p >
< a href = "#welcome-social" > Teile < / a > R ä ppi unter deinen Freunden
und Bekannten was das Zeug h ä lt ! Lufrai investiert kein Geld in
teures Marketing , aus der Ü berzeugung , dass es auf unserer Welt
bereits genug davon gibt .
< / p >
< h3 > Spenden < / h3 >
< p >
R ä ppli 1.0 wurde mit einem Aufwand von fast 4 Wochen entwickelt , "
< a href = "#welcome-lufrai" > Lufrai - Katja Lutz < / a > " hat somit etwa
18 ' 000 CHF in die Verwirklichung von diesem Projekt investiert . { " " }
< strong >
Herzlichen Dank , dass du dich daran beteiligen m ö chtest !
< / strong >
< / p >
< a
href = "https://lufrai.org/spenden/"
class = { ` btn btn-sm btn-secondary bg-purple-600 border-purple-600 ${ externalLinkClass } ` }
{ . . . externalLink }
>
Kontoinformationen < ExternalLinkIcon / >
< / a >
< h3 > Mitwirkung / Feedback < / h3 >
< p >
< p >
Irure laboris quis consequat enim tempor dolor . Esse velit
F ü r Feedbacks , bitte beachte den entsprechenden { " " }
occaecat dolore aute cillum pariatur reprehenderit irure duis eu
< a href = "#welcome-feedback" onClick = { onClickFocus } >
nulla pariatur fugiat consectetur ipsum . Commodo ad aliquip nulla
FAQ - Abschnitt
non incididunt . Officia veniam cillum cillum . Velit ex aliquip
< / a >
mollit deserunt nostrud id amet voluptate ea duis cupidatat
.
officia culpa consequat enim . Voluptate anim fugiat anim et elit
< / p >
aute cupidatat . Duis aliquip laboris adipisicing dolore elit
< p >
voluptate proident occaecat excepteur culpa exercitation velit .
Du bist ein Web - Entwickler , verstehst Javascript / Typescript wie
Veniam esse quis voluptate aliquip culpa . Aute cupidatat sunt amet
deine Westentasche und m ö chtest R ä ppli verbessern ? Hurra ! Bitte
ad fugiat id elit . Officia proident ea deserunt quis anim elit
schaue dir den < a href = "#welcome-opensource" > Open Source < / a > { " " }
cupidatat pariatur . Aliqua dolore ad eiusmod qui eu ea enim qui
Abschnitt an .
enim incididunt aute irure tempor fugiat sunt . Consequat magna
culpa Lorem nostrud cillum eu cillum adipisicing eu aute duis
excepteur . In anim mollit amet elit ex .
< / p >
< / p >
< h3 > Spende < / h3 >
< h3 > Mitwirkung < / h3 >
< / section >
< / section >
< section class = "mt-16" >
< section class = "mt-16" >
@ -406,16 +478,12 @@ const WelcomeModal: Component = (props) => {
kopieren , verteilen und erweitern . Du brauchst also keine Angst zu
kopieren , verteilen und erweitern . Du brauchst also keine Angst zu
haben , dass du irgendwann keine Rechnungen mehr schreiben darfst .
haben , dass du irgendwann keine Rechnungen mehr schreiben darfst .
Lizenziert ist R ä ppli mit { " " }
Lizenziert ist R ä ppli mit { " " }
< a
< ExternalLink href = "https://git.lufrai.com/rappli/rappli/src/branch/master/LICENSE" >
class = "inline-flex items-center gap-1"
href = "https://git.lufrai.com/rappli/rappli/raw/branch/master/LICENSE"
>
MIT
MIT
< ExternalLinkIcon / >
< / ExternalLink >
< / a >
.
.
< a
< a
class = "btn btn-sm inline-flex ml-3 items-center gap- 2 "
class = "btn btn-sm inline-flex ml-3 items-center gap- 1 "
href = "https://git.lufrai.com/rappli/rappli"
href = "https://git.lufrai.com/rappli/rappli"
{ . . . externalLink }
{ . . . externalLink }
>
>
@ -436,7 +504,7 @@ const WelcomeModal: Component = (props) => {
< ul >
< ul >
< li >
< li >
< a
< a
class = "flex items-center gap-2"
class = { externalLinkClass }
href = "https://www.solidjs.com/"
href = "https://www.solidjs.com/"
{ . . . externalLink }
{ . . . externalLink }
>
>
@ -446,7 +514,7 @@ const WelcomeModal: Component = (props) => {
< / li >
< / li >
< li >
< li >
< a
< a
class = "flex items-center gap-2"
class = { externalLinkClass }
href = "https://tailwindcss.com/"
href = "https://tailwindcss.com/"
{ . . . externalLink }
{ . . . externalLink }
>
>
@ -456,7 +524,7 @@ const WelcomeModal: Component = (props) => {
< / li >
< / li >
< li >
< li >
< a
< a
class = "flex items-center gap-2"
class = { externalLinkClass }
href = "https://daisyui.com/"
href = "https://daisyui.com/"
{ . . . externalLink }
{ . . . externalLink }
>
>
@ -466,7 +534,7 @@ const WelcomeModal: Component = (props) => {
< / li >
< / li >
< li >
< li >
< a
< a
class = "flex items-center gap-2"
class = { externalLinkClass }
href = "https://sortablejs.github.io/Sortable/"
href = "https://sortablejs.github.io/Sortable/"
{ . . . externalLink }
{ . . . externalLink }
>
>
@ -476,7 +544,7 @@ const WelcomeModal: Component = (props) => {
< / li >
< / li >
< li >
< li >
< a
< a
class = "flex items-center gap-2"
class = { externalLinkClass }
href = "https://remark.js.org/"
href = "https://remark.js.org/"
{ . . . externalLink }
{ . . . externalLink }
>
>
@ -490,30 +558,47 @@ const WelcomeModal: Component = (props) => {
< section class = "mt-16" >
< section class = "mt-16" >
< h2 id = "welcome-thankyou" > Danksagungen < / h2 >
< h2 id = "welcome-thankyou" > Danksagungen < / h2 >
< p >
< p >
An dieser Stelle m ö chte ich mich bei der Community von { " " }
An dieser Stelle m ö chte ich ( Katja ) mich bei der Community von { " " }
< a
< a
class = "inline-flex items-center gap-1 mr-1"
class = { externalLinkClass }
href = "https://www.solidjs.com/"
href = "https://www.solidjs.com/"
{ . . . externalLink }
{ . . . externalLink }
>
>
Solid < ExternalLinkIcon / >
Solid < ExternalLinkIcon / >
< / a >
< / a > { " " }
bedanken , nicht nur f ü r ihr verbl ü ffend effektives Open Source
bedanken , nicht nur f ü r ihr verbl ü ffend effektives Open Source
Web - Framework , sondern auch f ü r ihre Offenheit , Anregungen und
Web - Framework , sondern auch f ü r ihre Offenheit , Anregungen und
cleveren Tipps !
cleveren Tipps !
< / p >
< / p >
< p >
< p >
Ausserdem m ö chte ich ( Katja ) mich insbesondere bei { " " }
Ausserdem m ö chte ich mich insbesondere bei { thankYouRahelAndFredi } { " " }
{ thankYouRahelAndFredi } herzlichst bedanken , welche mir stets bei
herzlichst bedanken , welche mir stets bei der Umsetzung meiner
der Umsetzung meiner kurligen Projekte unterst ü tzend zur Seite
kurligen Projekte unterst ü tzend zur Seite standen und mich immer
standen und mich immer inspirierten , einen Schritt weiterzugehen !
inspirierten , einen Schritt weiterzugehen !
< / p >
< p >
Mein herzlicher Dank gilt zudem auch { " " }
< ExternalLink href = "https://www.kohei.dev/en-us" >
Kohei Asai
< / ExternalLink > { " " }
< small >
(
< ExternalLink href = "https://twitter.com/axross_" >
Twitter
< / ExternalLink >
)
< / small >
, welcher mir sehr grossz ü gig seine Rechte am Paketnamen "rappli"
auf { " " }
< ExternalLink href = "https://npmjs.com" > npmjs . com < / ExternalLink > { " " }
ü bertragen hat .
< / p >
< / p >
< / section >
< / section >
< section class = "mt-16" >
< section class = "mt-16" >
< h2 id = "welcome-faq" > H ä ufig gestellte Fragen < / h2 >
< h2 id = "welcome-faq" > H ä ufig gestellte Fragen < / h2 >
< div class = "text-black" >
< div class = "text-black" >
< AcordionItem
< Ac c ordionItem
id = "welcome-privacy"
id = "welcome-privacy"
label = { "1. Wo werden welche Daten gespeichert?" }
label = { "1. Wo werden welche Daten gespeichert?" }
alignCenter = { false }
alignCenter = { false }
@ -526,7 +611,7 @@ const WelcomeModal: Component = (props) => {
Einige deiner Daten , wie z . B . Bankverbindung , Logo und
Einige deiner Daten , wie z . B . Bankverbindung , Logo und
Zahlungsbedingungen verbleiben im { " " }
Zahlungsbedingungen verbleiben im { " " }
< span
< span
class = " border-b border-black border-dotted "
class = " text-title-border "
title = "Der sogennante localStorage"
title = "Der sogennante localStorage"
>
>
Speicher
Speicher
@ -539,7 +624,7 @@ const WelcomeModal: Component = (props) => {
funktionieren , m ü ssen jedoch unweigerlich einige Daten
funktionieren , m ü ssen jedoch unweigerlich einige Daten
ü bertragen werden , wie z . B . deine IP - Adresse . Erfahre { " " }
ü bertragen werden , wie z . B . deine IP - Adresse . Erfahre { " " }
< a
< a
class = "inline-flex items-center gap-1"
class = { externalLinkClass }
href = "https://t3n.de/news/tcp-ip-internet-grundlagen-755667/"
href = "https://t3n.de/news/tcp-ip-internet-grundlagen-755667/"
{ . . . externalLink }
{ . . . externalLink }
>
>
@ -549,46 +634,134 @@ const WelcomeModal: Component = (props) => {
wie das Internet funktioniert .
wie das Internet funktioniert .
< / li >
< / li >
< / ul >
< / ul >
< / Ac ordionItem>
< / Ac c ordionItem>
< Ac ordionItem
< Ac c ordionItem
label = "2. Ich habe vergessen zu speichern, was nun?!"
label = "2. Ich habe vergessen zu speichern, was nun?!"
alignCenter = { false }
alignCenter = { false }
>
>
Deine Daten werden auf keinem Server gespeichert . Lerne aus dem
Deine Daten werden auf keinem Server gespeichert . Lerne aus dem
Malheur und speichere ab sofort regelm ä ssig { " " }
Malheur und speichere ab sofort regelm ä ssig { " " }
< HugIcon class = "inline" / > !
< HugIcon class = "inline" / > !
< / AcordionItem >
< / AccordionItem >
< AcordionItem
< AccordionItem label = "3. Werden meine Nutzungsdaten zu Marketingzwecken gesammelt?" >
< strong > Nein < / strong > , vorausgesetzt du verwendest das
offizielle R ä ppli ü ber rappli . ch und keine modizifierte Version .
Lufrai legt Wert auf deine Privatsph ä re . Es werden keine
Nutzungsdaten an Google , Facebook oder ä hnliche Riesen
ü bermittelt .
< / AccordionItem >
< AccordionItem
id = "welcome-feedback"
label = {
label = {
< >
< >
3 . Ich habe einen Anpassungswunsch !
4 . Ich habe einen Anpassungswunsch !
< br / >
< br / >
Kann die App bitte gratis angepasst werden ?
Kann die App bitte gratis angepasst werden ?
< / >
< / >
}
}
alignCenter = { false }
alignCenter = { false }
>
>
test
R ä ppli ist < a href = "#welcome-opensource" > Open Source < / a > und
< / AcordionItem >
wird grunds ä tzlich von < a href = "#welcome-lufrai" > Lufrai < / a > { " " }
weiterentwickelt . F ü r eine optimale Weiterentwicklung ist dein
Feedback sehr wichtig und ich ( Katja ) bin f ü r dein Feedback und
deine Ideen dankbar ! Jedoch besteht keine Garantie daf ü r , dass
jedes Feedback beantwortet / umgesetzt werden kann , die
Entwicklung ist aufw ä ndig und kein Wunschkonzert . Kontaktiere
Lufrai auf { " " }
< a
href = "https://lufrai.org/impressum/"
class = { externalLinkClass }
{ . . . externalLink }
>
Kontakt < ExternalLinkIcon / >
< / a > { " " }
oder erstelle ein Issue auf dem { " " }
< a href = "#welcome-opensource" > Git - Repository < / a > .
< / AccordionItem >
< AcordionItem
< Ac c ordionItem
id = "welcome-agile"
id = "welcome-agile"
label = {
label = {
< div >
< div >
4 . Wie k ö nnen Aufwand - Sch ä tzungen gemacht werden ?
5 . Wie funktionieren < strong > Agile Positionen < / strong > ?
< br / >
Was hat es mit < strong > Agile < / strong > auf sich ?
< / div >
< / div >
}
}
alignCenter = { false }
alignCenter = { false }
>
>
test
< p class = "!mt-0 text-lg font-light lead" >
< / AcordionItem >
Agile Positionen k ö nnen dir dabei helfen , Arbeitsaufwand
( Zeit ) zu sch ä tzen .
< / p >
< p >
Der Preis von agilen Positionen wird aus Story Points , einem
Umrechnungssatz "Stunden pro Story Point" , dem Risiko Faktor
und dem Stundensatz ( "Einzelpreis" ) berechnet .
< / p >
< h3 > Was sind Story Points ? < / h3 >
< p >
Story Points sind relative Punktzahlen . Weise all deinen
Positionen Story Points zu , die im Verh ä ltnis zueinander
stimmen . Vergleiche dazu deine Positionen und ü berlege dir ,
welche davon schwieriger sind und welche einfacher . Wie viel
schwieriger ist eine Position ( Arbeitsaufwand ) im Vergleich zu
einer anderen ?
< / p >
< p >
Nachdem du die Story Points zugewiesen hast , kannst du dir
ü berlegen , wie viel Stunden ein einzelner Story Point wert
ist , trage diesen in den "Dokument" - Einstellungen unter
"Stunden pro Story Point" ein .
< / p >
< a
href = "https://www.agile-academy.com/de/product-owner/was-sind-story-points/"
class = { externalLinkClass }
{ . . . externalLink }
>
Erfahre mehr ü ber Story Points
< ExternalLinkIcon / >
< / a >
< h3 > Was ist der Risiko Faktor ? < / h3 >
< p >
Aufwandsch ä tzungen sind eine riskante Angelegenheit . R ä ppli
erlaubt dir deshalb f ü r den gesch ä tzten , optimalen Fall " Story
Points Minimum " und für den schlimmsten Fall " Story Points
Maximum " anzugeben .
< br / >
< strong >
Der Risiko Faktor wird in den "Dokument" - Einstellungen
eingegeben und er entscheidet ü ber die Gewichtung der
minimalen und maximalen Story Points :
< / strong >
< / p >
< ul class = "mb-8" >
< li >
Risiko Faktor von < span class = "underline" > 0 % < / span > : Es
existiert kein Risiko , < strong > nur die minimalen < / strong > { " " }
Story Points werden beachtet !
< / li >
< li >
Risiko Faktor von < span class = "underline" > 70 % < / span > : { " " }
< strong > 30 % von den Minimalen < / strong > , und { " " }
< strong > 70 % von den maximalen < / strong > Story Points werden
beachtet .
< / li >
< li >
Risiko Faktor von < span class = "underline" > 100 % < / span > : Der
Worst - Case ist alternativlos , { " " }
< strong > nur die maximalen < / strong > Story Points werden
beachtet !
< / li >
< / ul >
< AcordionItem
< AgileCalculator / >
label = { "5. Welche Geräte werden unterstützt?" }
< / AccordionItem >
< AccordionItem
label = { "6. Welche Geräte werden unterstützt?" }
alignCenter = { false }
alignCenter = { false }
>
>
< p class = "!mt-0" >
< p class = "!mt-0" >
@ -598,33 +771,115 @@ const WelcomeModal: Component = (props) => {
erreicht , jedoch sind auch "Google Chrome" basierte Browser
erreicht , jedoch sind auch "Google Chrome" basierte Browser
geeignet . Verwende einen aktuellen Browser !
geeignet . Verwende einen aktuellen Browser !
< / p >
< / p >
< / Ac ordionItem>
< / Ac c ordionItem>
< Ac ordionItem
< Ac c ordionItem
label = {
label = {
< div >
< div >
6 . K ö nnen Fliesstexte formatiert werden ?
7 . K ö nnen Fliesstexte formatiert werden ?
< br / >
< br / >
Was ist < strong > Markdown < / strong > ?
Was ist < strong > Markdown < / strong > ?
< / div >
< / div >
}
}
alignCenter = { false }
alignCenter = { false }
>
>
test
< p class = "!mt-0 mb-1" >
< / AcordionItem >
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 = { externalLinkClass }
{ . . . 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 >
< AcordionItem
< Ac c ordionItem
id = "welcome-local-installation"
id = "welcome-local-installation"
label = { < div > 7 . Kann R ä ppli lokal installiert werden ? < / div > }
label = { < div > 8 . Kann R ä ppli lokal installiert werden ? < / div > }
alignCenter = { false }
alignCenter = { false }
>
>
test
< p class = "!mt-0" >
< / AcordionItem >
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 = { externalLinkClass }
href = "https://nodejs.org/en/"
{ . . . externalLink }
>
nodejs { ">" } = 18 < ExternalLinkIcon / >
< / a >
< / li >
< / ul >
< h3 > Installation R ä ppli < / h3 >
< p > F ü hre folgenden Befehl aus : < / p >
< pre > npm install - g rappli < / pre >
< h3 > R ä ppli starten < / h3 >
< p > F ü hre folgenden Befehl aus , um R ä ppli zu starten < / p >
< pre > rappli < / pre >
< p >
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 .
< / p >
< / AccordionItem >
< AcordionItem
< Ac c ordionItem
label = {
label = {
< div >
< div >
8 . Wie pr ä zise wurden die SIX QR - Rechnung Vorgaben
9 . Wie pr ä zise wurden die SIX QR - Rechnung Vorgaben
umgesetzt ?
umgesetzt ?
< / div >
< / div >
}
}
@ -640,10 +895,10 @@ const WelcomeModal: Component = (props) => {
Mittel der Schweizer Regierung zur Verf ü gung standen , wurde
Mittel der Schweizer Regierung zur Verf ü gung standen , wurde
das Rad nicht komplett neu erfunden .
das Rad nicht komplett neu erfunden .
< / p >
< / p >
< / Ac ordionItem>
< / Ac c ordionItem>
< Ac ordionItem
< Ac c ordionItem
label = { < div > 9 . Haftungsausschluss < / div > }
label = { < div > 10 . Haftungsausschluss < / div > }
alignCenter = { false }
alignCenter = { false }
>
>
< p class = "!mt-0" >
< p class = "!mt-0" >
@ -662,7 +917,7 @@ const WelcomeModal: Component = (props) => {
< / a >
< / a >
.
.
< / p >
< / p >
< / Ac ordionItem>
< / Ac c ordionItem>
< / div >
< / div >
< / section >
< / section >
< / div >
< / div >
@ -707,10 +962,14 @@ const WelcomeModal: Component = (props) => {
< WarningIcon / > Bitte verwende einen Laptop oder Computer !
< WarningIcon / > Bitte verwende einen Laptop oder Computer !
< / div >
< / div >
< / div >
< / div >
< div class = "absolute bottom-8 right-8 text-xs text-black opacity-60 flex gap-3" >
< a
href = "https://git.lufrai.com/rappli/rappli/src/branch/master/CHANGELOG.md#changelog"
class = "hover:underline absolute bottom-8 right-8 text-xs text-black opacity-60 flex gap-3"
{ . . . externalLink }
>
< span > Version : { __APP_VERSION__ } < / span >
< span > Version : { __APP_VERSION__ } < / span >
< span > { getDisplayDate ( new Date ( __BUILD_TIME__ ) ) } < / span >
< span > { getDisplayDate ( new Date ( __BUILD_TIME__ ) ) } < / span >
< / div >
< / a >
< / Modal >
< / Modal >
) ;
) ;
} ;
} ;