diff --git a/src/info/components/kofi-donation-widget.js b/src/info/components/kofi-donation-widget.js
new file mode 100644
index 0000000..d36c083
--- /dev/null
+++ b/src/info/components/kofi-donation-widget.js
@@ -0,0 +1,22 @@
+import Iframe from "react-iframe";
+
+export default function KofiDonationWidget({ title, url }) {
+ return (
+
+ );
+}
diff --git a/src/info/components/support-block.js b/src/info/components/support-block.js
index 35a7dfa..e3aba03 100644
--- a/src/info/components/support-block.js
+++ b/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 (
You could support me through Patreon, Ko-fi, or Liberapay
-
-
-
-
-
-
- Open/Close Ko-fi Donation Widget
-
-
-
-
+ {Object.keys(support).map((sup) => (
+
+ ))}
+
);
diff --git a/src/info/components/support-button.js b/src/info/components/support-button.js
new file mode 100644
index 0000000..f08f1e9
--- /dev/null
+++ b/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 (
+
+ );
+ } else {
+ return (
+
+ );
+ }
+}
diff --git a/src/info/data/support.yml b/src/info/data/support.yml
new file mode 100644
index 0000000..afcffd1
--- /dev/null
+++ b/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"
diff --git a/src/info/pages/support/index.js b/src/info/pages/support/index.js
index 161f2b3..f054451 100644
--- a/src/info/pages/support/index.js
+++ b/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 (
-
+
);
}