use mdx for privacy, impressum, terms

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 } }
+}