use mdx for privacy, impressum, terms

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