use mdx for privacy, impressum, terms

helpers/mdFormatter.tsx

@@ -0,0 +1,31 @@
+export default {
+  h1: (props: any) => (
+    <h1
+      className="leading-tight border-b text-4xl font-semibold mb-4 mt-6 pb-2"
+      {...props}
+    />
+  ),
+  h2: (props: any) => (
+    <h2
+      className="leading-tight border-b text-2xl font-semibold mb-4 mt-6 pb-2"
+      {...props}
+    />
+  ),
+  h3: (props: any) => (
+    <h3 className="leading-snug text-lg font-semibold mb-4 mt-6" {...props} />
+  ),
+  h4: (props: any) => (
+    <h4 className="leading-none text-base font-semibold mb-4 mt-6" {...props} />
+  ),
+  h5: (props: any) => (
+    <h5 className="leading-tight text-sm font-semibold mb-4 mt-6" {...props} />
+  ),
+  h6: (props: any) => (
+    <h6
+      className="leading-tight text-sm font-semibold text-gray-600 mb-4 mt-6"
+      {...props}
+    />
+  ),
+  ul: (props: any) => <ul className="text-base pl-8 list-disc" {...props} />,
+  ol: (props: any) => <ol className="text-base pl-8 list-decimal" {...props} />,
+}

md/impressum.md

@@ -0,0 +1,33 @@
+# Impressum
+
+## Anschrift
+
+Freundeskreis des VCP Rosenfeld e.V.
+
+Mozartstr. 11
+
+72348 Rosenfeld
+
+### 1. Vorsitzender:
+
+Kevin Deckert
+
+Mozartstr. 11
+
+72348 Rosenfeld
+
+Telefon: +49 7428 3423
+
+### Bussle-Wart und Technisch Verantwortlicher dieser Webanwendung
+
+Thomas Ruoff
+
+Mömpelgardgasse 25
+
+72348 Rosenfeld
+
+Telefon: +49 151 21225362
+
+## Das Impressum gilt für:
+
+[https://pfadi-bussle.tomru.space](https://pfadi-bussle.tomru.space)

md/privacy.md

@@ -0,0 +1,82 @@
+# Datenschutzerklärung
+
+## Geltungsbereich
+
+Diese Datenschutzerklärung soll die Nutzer dieser Website gemäß
+Bundesdatenschutzgesetz und Telemediengesetz über die Art, den Umfang
+und den Zweck der Erhebung und Verwendung personenbezogener Daten durch
+den Websitebetreiber [Thomas Ruoff](mailto:pfadibussle@tomru.space)
+informieren.
+
+Der Websitebetreiber nimmt Ihren Datenschutz sehr ernst und behandelt
+Ihre personenbezogenen Daten vertraulich und entsprechend der
+gesetzlichen Vorschriften. Bedenken Sie, dass die Datenübertragung im
+Internet grundsätzlich mit Sicherheitslücken bedacht sein kann. Ein
+vollumfänglicher Schutz vor dem Zugriff durch Fremde ist nicht
+realisierbar.
+
+## Zugriffsdaten
+
+Der Websitebetreiber bzw. Seitenprovider erhebt Daten über Zugriffe auf
+die Seite und speichert diese als „Server-Logfiles“ ab. Folgende Daten
+werden so protokolliert:
+
+- Besuchte URL
+- Uhrzeit zum Zeitpunkt des Zugriffes
+- Menge der gesendeten Daten in Byte
+- Quelle/Verweis, von welchem Sie auf die Seite gelangten
+- Verwendeter Browser
+- Verwendetes Betriebssystem
+- Verwendete IP-Adresse
+
+Die erhobenen Daten dienen lediglich statistischen Auswertungen und zur
+Verbesserung der Website. Der Websitebetreiber behält sich allerdings
+vor, die Server-Logfiles nachträglich zu überprüfen, sollten konkrete
+Anhaltspunkte auf eine rechtswidrige Nutzung hinweisen.
+
+## Cookies
+
+Diese Website verwendet keine Cookies.
+
+## Benutzerkonto
+
+Um über dieses Angebot Buchungsanfragen tätigen zu können, ist kein
+Kundenkonto notwendig noch vorgesehen.
+
+## Buchungsanfragedaten merken
+
+Wenn sie eine Buchungsanfrage tätigen, wird Ihnen angeboten, die
+Buchunsanfragedaten für die nächste Buchung zu merken um weitere
+Anfragen zu beschleunigen. Die Speicherung der Buchungsdaten erfolgt
+dabei nicht auf unserem Server sondern nur in Ihrem Browser, genauer auf
+Ihrem Endgerät im s.g. LocalStorage. Diese Daten sind also nicht in
+unserem Besitzt noch habe wir Zugriff darauf. Erste wenn eine weitere
+Buchunsanfrage, mit den bei Ihnen gespeicherten Daten vorausgefüllt und
+abgeschickt wird, erhalten wir Zugriff drauf. Es besteht somit keinen
+Unterschied, ob sie die Daten manuell oder mit dieser Funktion
+vorausfüllen lassen. Die für diese Funktion in Ihrem Browser
+gespeicherten Daten umfassen ausschließlich Daten welche sie vorher zum
+Zwecke einer Buchungsanfrage eingegeben haben. Ob sie aktuell
+Buchungsdaten gespeichert haben, wir Ihnen als Info-Nachricht in der
+Buchungsanfragemaske angezeigt. Alle gespeicherten Felder werden in
+diesem Fall auch gleich im Formular transparent vorausgefüllt. Falls Sie
+diese Daten löschen möchten, können Sie dies über einen Link in der
+Info-Nachricht bewerkstelligen.
+
+## Buchungsanfrage
+
+Sämtliche Daten, welche im Rahmen einer Bestellabwicklung von den Kunden
+eingegeben werden, werden gespeichert. Dazu gehören:
+
+- Start- und Enddatum der Anfrage
+- Zweck und Ziel der Fahrt (sofern angegeben)
+- Verein (sofern angegeben)
+- Name
+- Adresse
+- E-Mail-Adresse
+- Telefonnummer (falls angegeben)
+
+Jene Daten, welche zur Auftragsabwicklung zwingend notwendig sind,
+werden an dritte Dienstleister weitergegeben. Sowie die Aufbewahrung
+Ihrer Daten nicht mehr erforderlich oder gesetzlich geboten ist, werden
+diese gelöscht.

md/terms.md

@@ -0,0 +1,102 @@
+# I. Pflichten des Eigentümers
+
+## 1. Gebrauchsttauglichkeit des Fahrzeugs
+
+Der Eigentümer überläßt dem Benutzer ein verkehrsicheres und technisch
+einwandfreies Fahrzeug nebst Zubehör zum Gebrauch.
+
+## 2. Versicherung
+
+Das Fahrzeug ist bei der WGV versichert.
+
+### 1. Kraffahrt-Haftplichtversicherung (KH)
+
+EURO 100 Mio. pauschal für Personen-, Sach- und Vermögensschäden, jedoch
+max. Euro 8 Mio. je geschädigter Person.
+
+### 2. Schutzbrief (VSV)
+
+### 3. Kraftfahrt-Vollkaskoversicherung (KV)
+
+mit Euro 300,- Selbstbeteiligung einschließlich Teilkaskoversicherung mit EUR
+150,- Selbstbeteiligung.
+
+## 3. Reparatur
+
+Wird während der Benutzerzeit eine Reparatur notwendig, um den Betribeb oder
+die Verkehrssicherheit des Fahrzeugs zu gewährleisten, darf der Benutzer eine
+Vertragswerkstätte bis zum Kostenbetrag von 100,- EUR ohne weiteres, bei
+größeren Reparaturen hingegen nur mit Einwilliung des Eigentümers,
+beauftragen. Die Reparaturkosten trägt der Eigentümer, soweit der Benutzer
+nicht nach Nr. 3 dieser Bestimmung haftet.
+
+# II. Pflichten des Benutzers
+
+## 1. Der Benutzerpreis
+
+richtet sich nach der Vereinbarung im Überlassungsvertrag.
+Teibstoff und Motorenöl geht bei über 200 km zu Lasten des Benutzers,
+bis 200 km zu Lasten des Eigentümers.
+
+## 2. Fürungsberechtigte
+
+Das Fahrzeug darf nur vom Benutzer und den im Benutzervertrag angegebenen
+Fahrer geführt werden, die mindestens 1 Jahr PKW-Fahrpraxis haben müssen.
+
+## 3. Obhutspflicht
+
+Der Benutzer hat das Fahrzeug sorgsam zu behandeln und alle für die Benutztung
+gegebenen Vorschriften und technischen Regeln zu beachten sowie das Fahrzeug
+ordnungsgemäß zu verschließen.
+
+## 4. Anzeigepflicht
+
+Bei Unfällen hat der Benutzer dem Eigentümer sogleich, spätestens bei Rückgabe
+des Fahrzeugs, über alle Einzelheiten schriftlich unter Vorlage einer Skizze
+zu unterrichten. Der Unfallbericht muß insbesondere Namen und Anschriften der
+beteiligten Personsen und etwaiger Zeugen sowie die amtlichen Kennzeichen der
+beteiligten Fahrzeuge enthalten. Der Benutzer hat nach einem Unfall die Plizei
+zu verständigen, soweit die zur Aufklärung des Unfalls erforderlichen
+Feststellungen nicht auf andere Weise, z.B. mit Hilfe von Zeugen, zuverlässig
+getroffen werden können. Gegnerische Ansprüche dürfen nicht anerkannt werden.
+Brand oder Entwendungsschäden sowie Wildschäden sind zom Benutzer dem
+Eigentümer zowie der zustädigen Polizeibehörde unverzüglich anzuzeigen.
+
+## 5. Fahrzeugrücknahme
+
+Der Benutzer ist verpflichtet, das Fahrzeug bei Ablauf der Benutzungszeit dem
+Eigentümer am vereinbarten Ort in ordentlichem und sauberem Zustand
+zurückzugeben.
+
+# III. Haftung des Benutzers
+
+## 1. Allgemeine Haftungsregelungen
+
+Der Benutzer haftet nach dem allgemeinen Haftungsregeln, wenn er das
+Fahrzeug beschädigt oder eine sonstige Vertragsverletzung begeht.
+Insbesondere hat der Benutzer das Fahrzeug in demselben Zustand
+zurückzugeben, wie er es übernommen hat. Die Haftung des Benutzers
+erstreckt sich auch auf die Schandesnebenkosten wie:
+
+a) Sachverstädigerkosten
+b) Abschleppkosten
+c) Wertminderung
+
+Wird das Fahrzeug durch Brand, Explosion oder Wild beschädigt,
+beschränkt sich die Haftung des Benutzers auf den Selbstbehalt der
+Vollkaskoversicherung, sofern er die Beschädigung nicht aus grobem
+Verschulden herbeigeführt oder gegen die Anzeigepflicht (gemäß Nr. II 4)
+diser Bediungng verstoßen hat. Der Benutzer haftet für Schäden am
+Fahrzeug und für die Nebenkosten, wenn er den Schaden durch grobes
+Verschulden herbeigeführt, er Unfallflucht begangen oder der Schaden bei
+alkohol- oder drogenbedinter Fahruntüchtigkeit entstanden ist. Der
+Benuzter haftet ferner voll, wenn er gegen die Obligenheiten (gemäß Nr.
+II 2 oder Nr. II 4) verstoßen hat. Bei der Anmietung haftet der Benutzer
+für alle durch das Ladegut entstehden Schäden, auch bei
+Haftungsbeschränkung.
+
+## 2. Rücktritt
+
+Tritt der Benutzer kurzfristig vor Antritt der Benutzungstage zurück, kann
+er eine Ausfallgebühr bezahlen müssen. Sie richtet sich nach den evtl.
+enstandenen Benutzungsausfallkosten.

package.json

@@ -16,6 +16,7 @@
     "mongoose": "^5.12.2",
     "next": "^10.1.3",
     "next-iron-session": "^4.1.12",
+    "next-mdx-remote": "^2.1.3",
     "p-retry": "^4.4.0",
     "react": "^17.0.2",
     "react-calendar": "^3.3.1",

pages/impressum.tsx

@@ -1,51 +1,24 @@
+import { readFileSync } from 'fs'
+import renderToString from 'next-mdx-remote/render-to-string'
+import mdFormatter from '../helpers/mdFormatter'
+
 import Layout from '../components/layout'
 
-export default function Impressum() {
+export default function TermsPage({ renderedOutput }) {
   return (
     <Layout>
-      <h1 className="mb-3 text-xl font-extrabold">Impressum</h1>
-
-      <address className="mb-3">
-        Freundeskreis des VCP Rosenfeld e.V.
-        <br />
-        Mozartstr. 11
-        <br />
-        72348 Rosenfeld
-        <br />
-      </address>
-
-      <h2 className="text-lg">1. Vorsitzender:</h2>
-      <address className="mb-3">
-        Kevin Deckert
-        <br />
-        Mozartstr. 11
-        <br />
-        72348 Rosenfeld
-        <br />
-        Telefon: +49 7428 3423
-        <br />
-      </address>
-
-      <h2 className="text-lg">
-        Bussle-Wart und Technisch Verantwortlicher dieser Webanwendung:
-      </h2>
-      <address className="mb-3">
-        Thomas Ruoff
-        <br />
-        Mömpelgardgasse 25
-        <br />
-        72348 Rosenfeld
-        <br />
-        Telefon: +49 151 21225362
-        <br />
-      </address>
-
-      <p>
-        Das Impressum gilt für:{' '}
-        <a className="link" href="https://pfadi-bussle.tomru.space">
-          https://pfadi-bussle.tomru.space
-        </a>
-      </p>
+      <div
+        className="text-gray-700"
+        dangerouslySetInnerHTML={{ __html: renderedOutput }}
+      />
     </Layout>
   )
 }
+
+export async function getStaticProps() {
+  const source = readFileSync('./md/impressum.md', 'utf8')
+  const { renderedOutput } = await renderToString(source, {
+    components: { ...mdFormatter },
+  })
+  return { props: { renderedOutput } }
+}

pages/privacy.tsx

@@ -1,101 +1,24 @@
-import React from 'react'
+import { readFileSync } from 'fs'
+import renderToString from 'next-mdx-remote/render-to-string'
+import mdFormatter from '../helpers/mdFormatter'
+
 import Layout from '../components/layout'
 
-export default function Privacy() {
+export default function TermsPage({ renderedOutput }) {
   return (
     <Layout>
-      <h1 className="mb-3 text-xl font-extrabold">Datenschutzerklärung</h1>
-      <h2 className="mb-2 text-lg font-extrabold">Geltungsbereich</h2>
-      <p className="mb-2">
-        Diese Datenschutzerklärung soll die Nutzer dieser Website gemäß
-        Bundesdatenschutzgesetz und Telemediengesetz über die Art, den Umfang
-        und den Zweck der Erhebung und Verwendung personenbezogener Daten durch
-        den Websitebetreiber{' '}
-        <a className="link" href="mailto:pfadibussle@tomru.space">
-          Thomas Ruoff
-        </a>{' '}
-        informieren.
-      </p>
-      <p className="mb-2">
-        Der Websitebetreiber nimmt Ihren Datenschutz sehr ernst und behandelt
-        Ihre personenbezogenen Daten vertraulich und entsprechend der
-        gesetzlichen Vorschriften. Bedenken Sie, dass die Datenübertragung im
-        Internet grundsätzlich mit Sicherheitslücken bedacht sein kann. Ein
-        vollumfänglicher Schutz vor dem Zugriff durch Fremde ist nicht
-        realisierbar.
-      </p>
-      <h2 className="mb-2 text-lg font-extrabold">Zugriffsdaten</h2>
-      <p className="mb-2">
-        Der Websitebetreiber bzw. Seitenprovider erhebt Daten über Zugriffe auf
-        die Seite und speichert diese als „Server-Logfiles“ ab. Folgende Daten
-        werden so protokolliert:{' '}
-      </p>
-      <ul className="mb-2 list-disc list-inside">
-        <li>Besuchte URL</li>
-        <li>Uhrzeit zum Zeitpunkt des Zugriffes</li>
-        <li>Menge der gesendeten Daten in Byte</li>
-        <li>Quelle/Verweis, von welchem Sie auf die Seite gelangten</li>
-        <li>Verwendeter Browser</li>
-        <li>Verwendetes Betriebssystem</li>
-        <li>Verwendete IP-Adresse</li>
-      </ul>
-
-      <p className="mb-2">
-        Die erhobenen Daten dienen lediglich statistischen Auswertungen und zur
-        Verbesserung der Website. Der Websitebetreiber behält sich allerdings
-        vor, die Server-Logfiles nachträglich zu überprüfen, sollten konkrete
-        Anhaltspunkte auf eine rechtswidrige Nutzung hinweisen.
-      </p>
-
-      <h2 className="mb-2 text-lg font-extrabold">Cookies</h2>
-      <p className="mb-2">Diese Website verwendet keine Cookies.</p>
-      <h2 className="mb-2 text-lg font-extrabold">Benutzerkonto</h2>
-      <p className="mb-2">
-        Um über dieses Angebot Buchungsanfragen tätigen zu können, ist kein
-        Kundenkonto notwendig noch vorgesehen.
-      </p>
-      <h2 className="mb-2 text-lg font-extrabold">
-        Buchungsanfragedaten merken
-      </h2>
-      <p className="mb-2">
-        Wenn sie eine Buchungsanfrage tätigen, wird Ihnen angeboten, die
-        Buchunsanfragedaten für die nächste Buchung zu merken um weitere
-        Anfragen zu beschleunigen. Die Speicherung der Buchungsdaten erfolgt
-        dabei nicht auf unserem Server sondern nur in Ihrem Browser, genauer auf
-        Ihrem Endgerät im s.g. LocalStorage. Diese Daten sind also nicht in
-        unserem Besitzt noch habe wir Zugriff darauf. Erste wenn eine weitere
-        Buchunsanfrage, mit den bei Ihnen gespeicherten Daten vorausgefüllt und
-        abgeschickt wird, erhalten wir Zugriff drauf. Es besteht somit keinen
-        Unterschied, ob sie die Daten manuell oder mit dieser Funktion
-        vorausfüllen lassen. Die für diese Funktion in Ihrem Browser
-        gespeicherten Daten umfassen ausschließlich Daten welche sie vorher zum
-        Zwecke einer Buchungsanfrage eingegeben haben. Ob sie aktuell
-        Buchungsdaten gespeichert haben, wir Ihnen als Info-Nachricht in der
-        Buchungsanfragemaske angezeigt. Alle gespeicherten Felder werden in
-        diesem Fall auch gleich im Formular transparent vorausgefüllt. Falls Sie
-        diese Daten löschen möchten, können Sie dies über einen Link in der
-        Info-Nachricht bewerkstelligen.
-      </p>
-      <h2 className="mb-2 text-lg font-extrabold">Buchungsanfrage</h2>
-      <p className="mb-2">
-        Sämtliche Daten, welche im Rahmen einer Bestellabwicklung von den Kunden
-        eingegeben werden, werden gespeichert. Dazu gehören:
-      </p>
-      <ul className="mb-2 list-disc list-inside">
-        <li>Start- und Enddatum der Anfrage</li>
-        <li>Zweck und Ziel der Fahrt (sofern angegeben)</li>
-        <li>Verein (sofern angegeben)</li>
-        <li>Name</li>
-        <li>Adresse</li>
-        <li>E-Mail-Adresse</li>
-        <li>Telefonnummer (falls angegeben)</li>
-      </ul>
-      <p className="mb-2">
-        Jene Daten, welche zur Auftragsabwicklung zwingend notwendig sind,
-        werden an dritte Dienstleister weitergegeben. Sowie die Aufbewahrung
-        Ihrer Daten nicht mehr erforderlich oder gesetzlich geboten ist, werden
-        diese gelöscht.
-      </p>
+      <div
+        className="text-gray-700"
+        dangerouslySetInnerHTML={{ __html: renderedOutput }}
+      />
     </Layout>
   )
 }
+
+export async function getStaticProps() {
+  const source = readFileSync('./md/privacy.md', 'utf8')
+  const { renderedOutput } = await renderToString(source, {
+    components: { ...mdFormatter },
+  })
+  return { props: { renderedOutput } }
+}

pages/terms.tsx

@@ -1,28 +1,24 @@
+import { readFileSync } from 'fs'
+import renderToString from 'next-mdx-remote/render-to-string'
+import mdFormatter from '../helpers/mdFormatter'
+
 import Layout from '../components/layout'
 
-export default function Terms() {
+export default function TermsPage({ renderedOutput }) {
   return (
     <Layout>
-      <h1 className="mb-3 text-xl font-extrabold">
-        Allgemeine Geschäftsbedinungen
-      </h1>
-      <h2 className="mb-2 text-lg font-extrabold">Grundlegende Bedingungen</h2>
-      <p>
-        Die nachstenden Bedingungen gelten für Verträge zwischen Freundeskreis
-        des VCP Rosenfeld e.V.- nachfolgend Anbieter genannt - und Kunden,
-        welche auf https://pfadi-bussle.tomru.space geschlossen werden.
-        <br />
-        Für diese Veträge wird der Anbieter von Thomas Ruoff, Mömpelgardgasse
-        25, 72348 Rosenfeld - nachfolgend dem Bussle-Warte - vertreten.
-      </p>
-      <h2 className="mb-2 text-lg font-extrabold">Vertragsgegenstand</h2>
-      <p className="mb-2">TODO</p>
-      <h2 className="mb-2 text-lg font-extrabold">Vertragsschluss</h2>
-      <p className="mb-2">TODO</p>
-      <h2 className="mb-2 text-lg font-extrabold">Vertragsdauer</h2>
-      <p className="mb-2">TODO</p>
-      <h2 className="mb-2 text-lg font-extrabold">Vertragsdauer</h2>
-      <p className="mb-2">TODO</p>
+      <div
+        className="text-gray-700"
+        dangerouslySetInnerHTML={{ __html: renderedOutput }}
+      />
     </Layout>
   )
 }
+
+export async function getStaticProps() {
+  const source = readFileSync('./md/terms.md', 'utf8')
+  const { renderedOutput } = await renderToString(source, {
+    components: { ...mdFormatter },
+  })
+  return { props: { renderedOutput } }
+}