migrated support page to components, moved data to its own YAML file.
This commit is contained in:
Alexis Werefox
parent
d9acc8c1ef
commit
8060916bb7
22
src/info/components/kofi-donation-widget.js
Normal file
22
src/info/components/kofi-donation-widget.js
Normal 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>
|
||||
);
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
|
||||
39
src/info/components/support-button.js
Normal file
39
src/info/components/support-button.js
Normal 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
19
src/info/data/support.yml
Normal 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"
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user