Add donation info including QR code

Author: fhammerschmidt

pages/community/donate.mdx

@@ -14,6 +14,7 @@ It also enables us to fund important Open Source projects within the ReScript ec
 
 ## How to Donate?
 
-TODO:
-* Add stripe payment link: https://stripe.com/at/payments/payment-links
-* Add open collective link?
+For now we only support SEPA transfers. 
+
+
+<DonationForm />

public/static/donation_qr_code.svg

@@ -529,6 +529,11 @@ module Video = {
   }
 }
 
+module DonationForm = {
+  @react.component
+  let make = () => <DonationForm />
+}
+
 // Useful for debugging injected values in props
 //  let mdxTestComponent: React.component<{.}> = %raw(`
 //  function(children) {

src/components/Markdown.res

@@ -169,6 +169,11 @@ module Video: {
   let make: (~src: string, ~caption: string=?) => React.element
 }
 
+module DonationForm: {
+  @react.component
+  let make: unit => React.element
+}
+
 // Used for the MdxJS Provider
 
 /* Sets our preferred branded styles

src/components/Markdown.resi

@@ -21,6 +21,8 @@ type t = {
   urlBox?: React.componentLike<UrlBox.props<string, string, Mdx.MdxChildren.t>, React.element>,
   @as("CodeTab")
   codeTab?: CodeTab.props<Mdx.MdxChildren.t, array<string>> => React.element,
+  @as("DonationForm")
+  donationForm?: React.componentLike<DonationForm.props, React.element>,
   /* Common markdown elements */
   p?: P.props<React.element> => React.element,
   li?: Li.props<React.element> => React.element,
@@ -74,4 +76,5 @@ let default = {
   pre: Pre.make,
   blockquote: Blockquote.make,
   code: Code.make,
+  donationForm: DonationForm.make,
 }

src/components/MarkdownComponents.res

@@ -0,0 +1,31 @@
+// TODO (fham): Make this a stripe checkout form.
+// 1. Create a rescript-association stripe account
+// 2. Use stripe's library on npm
+
+@react.component
+let make = () => {
+  <div className="max-w-2xl">
+    <div className="mb-6">
+      <div className="py-4 font-mono">
+        <p>
+          <strong> {React.string("IBAN: ")} </strong>
+          {React.string("AT24 2021 9000 2110 4161")}
+        </p>
+        <p>
+          <strong> {React.string("BIC: ")} </strong>
+          {React.string("GIBAATWWXXX")}
+        </p>
+        <p>
+          <strong> {React.string("Bank: ")} </strong>
+          {React.string("Erste Bank der oesterreichischen Sparkassen AG")}
+        </p>
+        <p>
+          <strong> {React.string("Account Name: ")} </strong>
+          {React.string("ReScript Association")}
+        </p>
+      </div>
+    </div>
+
+    <img src="/static/donation_qr_code.svg" className="w-48 mx-auto mt-6" alt="SEPA QR Code" />
+  </div>
+}