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

This commit is contained in:
Alexis Werefox 2021-07-11 03:35:45 +00:00
parent d9acc8c1ef
commit 8060916bb7
5 changed files with 116 additions and 67 deletions

View File

@ -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>
);
}

View File

@ -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">
<Link href="https://www.patreon.com/bePatron?u=16333959">
<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="Subscribe to Alexis' Patreon"
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"
{Object.keys(support).map((sup) => (
<SButton
key={sup}
title={support[sup].title}
alt={support[sup].alt}
src={support[sup].src}
url={support[sup].url}
/>
</a>
</Link>
</div>
<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"
))}
<KWidget
title="Open/Close Ko-fi Donation Widget"
url="https://ko-fi.com/alexis_werefox/?hidefeed=true&widget=true&embed=true&preview=true"
height="680"
></Iframe>
</div>
</div>
</details>
</div>
/>
</div>
</WCard>
);

View File

@ -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>
);
}
}

19
src/info/data/support.yml Normal file
View File

@ -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"

View File

@ -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>
);
}