migrated support page to components, moved data to its own YAML file.

src/info/components/kofi-donation-widget.js

@@ -0,0 +1,22 @@
+import Iframe from "react-iframe";
+
+export default function KofiDonationWidget({ title, url }) {
+  return (
+    <div className="pb-6 flex justify-center">
+      <details className="rounded-lg p-1 overflow-auto">
+        <summary className="p-2 pl-4 pr-4 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker text-md text-center text-werefox-grey-darker dark:text-werefox-grey-lighter bg-werefox-blue dark:bg-werefox-blue-dark transition hover:bg-werefox-blue-light dark:hover:bg-werefox-blue-darker">
+          <strong>{title}</strong>
+        </summary>
+        <div className="pt-2">
+          <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker overflow-auto">
+            <Iframe
+              className="rounded-lg w-96 min-w-96"
+              url={url}
+              height="680"
+            ></Iframe>
+          </div>
+        </div>
+      </details>
+    </div>
+  );
+}

src/info/components/support-block.js

@@ -1,8 +1,8 @@
-import Link from "next/link";
 import WCard from "./werefox-card.js";
-import Iframe from "react-iframe";
+import SButton from "./support-button.js";
+import KWidget from "./kofi-donation-widget.js";
 
-export default function SupportBlock() {
+export default function SupportBlock({ support }) {
   return (
     <WCard
       innerText="I would sincerely appreciate if you would throw some financial
@@ -12,68 +12,19 @@ export default function SupportBlock() {
         <p className="text-lg md:text-2xl text-center text-werefox-blue-dark dark:text-werefox-blue">
           You could support me through Patreon, Ko-fi, or Liberapay
         </p>
-        <div className="w-full justify-center flex">
+        {Object.keys(support).map((sup) => (
-          <Link href="https://www.patreon.com/bePatron?u=16333959">
+          <SButton
-            <a target="_blank">
+            key={sup}
-              <p className="rounded-lg pt-2 pb-2 pl-4 pr-4 w-full w-max-60 ring-2 ring-werefox-grey dark:ring-werefox-grey-darker text-lg text-center text-werefox-grey-darker dark:text-werefox-grey-lightest bg-werefox-blue dark:bg-werefox-blue-dark transition hover:bg-werefox-blue-light dark:hover:bg-werefox-blue-darker">
+            title={support[sup].title}
-                <span>
+            alt={support[sup].alt}
-                  <img
+            src={support[sup].src}
-                    alt="Subscribe to Alexis' Patreon"
+            url={support[sup].url}
-                    src="/images/patreon_logo.png"
-                    className="inline-flex h-6"
-                  ></img>
-                </span>{" "}
-                Become a Patron!
-              </p>
-            </a>
-          </Link>
-        </div>
-        <div className="w-full justify-center flex">
-          <Link href="https://ko-fi.com/O5O61UAY1">
-            <a target="_blank">
-              <p className="rounded-lg pt-2 pb-2 pl-4 pr-4 w-full w-max-60 ring-2 ring-werefox-grey dark:ring-werefox-grey-darker text-lg text-center text-werefox-grey-darker dark:text-werefox-grey-lightest bg-werefox-blue dark:bg-werefox-blue-dark transition hover:bg-werefox-blue-light dark:hover:bg-werefox-blue-darker">
-                <span>
-                  <img
-                    alt="Buy Alexis a Coffee"
-                    src="/images/kofi_logo.png"
-                    className="inline-flex w-6 pb-1"
-                  ></img>
-                </span>{" "}
-                Buy me a Coffee!
-              </p>
-            </a>
-          </Link>
-        </div>
-        <div className="w-full justify-center flex">
-          <Link href="https://liberapay.com/alexis_werefox/donate">
-            <a
-              target="_blank"
-              className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker"
-            >
-              <img
-                alt="Donate using Liberapay"
-                src="/images/liberapay_donate.svg"
-                className="inline-flex h-10 filter transition hover:brightness-125"
           />
-            </a>
+        ))}
-          </Link>
+        <KWidget
-        </div>
+          title="Open/Close Ko-fi Donation Widget"
-        <div className="pb-6 flex justify-center">
-          <details className="rounded-lg p-1 overflow-auto">
-            <summary className="p-2 pl-4 pr-4 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker text-md text-center text-werefox-grey-darker dark:text-werefox-grey-lighter bg-werefox-blue dark:bg-werefox-blue-dark transition hover:bg-werefox-blue-light dark:hover:bg-werefox-blue-darker">
-              <strong>Open/Close Ko-fi Donation Widget</strong>
-            </summary>
-            <div className="pt-2">
-              <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker overflow-auto">
-                <Iframe
-                  className="rounded-lg w-96 min-w-96"
           url="https://ko-fi.com/alexis_werefox/?hidefeed=true&widget=true&embed=true&preview=true"
-                  height="680"
+        />
-                ></Iframe>
-              </div>
-            </div>
-          </details>
-        </div>
       </div>
     </WCard>
   );

src/info/components/support-button.js

@@ -0,0 +1,39 @@
+import Link from "next/link";
+import Image from "next/image";
+
+export default function SupportButton({ title, alt, src, url }) {
+  const emptyTitle = title ? true : false;
+  if (emptyTitle) {
+    return (
+      <div className="w-full justify-center flex">
+        <Link href={url}>
+          <a target="_blank">
+            <p className="rounded-lg pt-2 pb-2 pl-4 pr-4 w-full w-max-60 ring-2 ring-werefox-grey dark:ring-werefox-grey-darker text-lg text-center text-werefox-grey-darker dark:text-werefox-grey-lightest bg-werefox-blue dark:bg-werefox-blue-dark transition hover:bg-werefox-blue-light dark:hover:bg-werefox-blue-darker">
+              <span className="inline-block h-6">
+                <img alt={alt} src={src} className="inline-block h-6"></img>
+              </span>{" "}
+              {title}
+            </p>
+          </a>
+        </Link>
+      </div>
+    );
+  } else {
+    return (
+      <div className="w-full justify-center flex">
+        <Link href={url}>
+          <a
+            target="_blank"
+            className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker"
+          >
+            <img
+              alt={alt}
+              src={src}
+              className="inline-flex h-10 filter transition hover:brightness-125"
+            />
+          </a>
+        </Link>
+      </div>
+    );
+  }
+}

src/info/data/support.yml

@@ -0,0 +1,19 @@
+--- # Support YAML
+
+Patreon:
+  title: "Become a Patron!"
+  alt: "Subscribe to Alexis' Patreon"
+  src: "/images/patreon_logo.png"
+  url: "https://www.patreon.com/bePatron?u=16333959"
+
+Kofi:
+  title: "Buy me a Coffee!"
+  alt: "Buy Alexis a Coffee"
+  src: "/images/kofi_logo.png"
+  url: "https://ko-fi.com/O5O61UAY1"
+
+Liberapay:
+  title: ""
+  alt: "Donate using Liberapay"
+  src: "/images/liberapay_donate.svg"
+  url: "https://liberapay.com/alexis_werefox/donate"

src/info/pages/support/index.js

@@ -1,10 +1,28 @@
 import BasicPage from "../../components/basic-page";
 import SBlock from "../../components/support-block";
 
-export default function Support() {
+// An object listing pages folks can visit
+export async function getStaticProps() {
+  const fs = require("fs");
+  const yaml = require("js-yaml");
+  let SUPPORT = {};
+  try {
+    let fileContent = fs.readFileSync("./data/support.yml", "utf8");
+    SUPPORT = yaml.load(fileContent);
+  } catch (e) {
+    console.log(e);
+  }
+  return {
+    props: {
+      SUPPORT,
+    },
+  };
+}
+
+export default function Support({ SUPPORT }) {
   return (
     <BasicPage page_title="Support" card_title="Support Me!">
-      <SBlock />
+      <SBlock support={SUPPORT} />
     </BasicPage>
   );
 }