beginning refactor, started migrating support page code to components.

This commit is contained in:
Alexis Werefox 2021-07-10 16:49:58 +00:00
parent bcf373b203
commit d9acc8c1ef
15 changed files with 117 additions and 97 deletions

View File

@ -0,0 +1,11 @@
export default function introductionCard({ introduction }) {
return (
<div className="items-center justify-center space-y-4 p-8">
{Object.keys(introduction).map((info) => (
<p className="overflow-wrap w-full text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
{introduction[info]}
</p>
))}
</div>
);
}

View File

@ -0,0 +1,80 @@
import Link from "next/link";
import WCard from "./werefox-card.js";
import Iframe from "react-iframe";
export default function SupportBlock() {
return (
<WCard
innerText="I would sincerely appreciate if you would throw some financial
support my way!! 💙"
>
<div className="p-4 space-y-4">
<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"
/>
</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"
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,7 @@
--- # Introduction YAML
intro: |
I'd describe myself as somewhere between a hot date and a hot mess. Just a witchy foxxo programmer trying to make it in the world tbh.
Feel free to click/tap any of the cute buttons above this to learn more about my different aspects of personality.
Down below, I've got some more neat little pages and useful info you can look at.
Please do look around and enjoy your stay!~ 💙

View File

@ -9,7 +9,7 @@ export async function getStaticProps() {
let PARTNERS = {}; let PARTNERS = {};
try { try {
let fileContent = fs.readFileSync("./data/partners.yml", "utf8"); let fileContent = fs.readFileSync("./data/identities/partners.yml", "utf8");
PARTNERS = yaml.load(fileContent); PARTNERS = yaml.load(fileContent);
} catch (e) { } catch (e) {
console.log(e); console.log(e);

View File

@ -1,6 +1,7 @@
import HomePage from "../components/home-page"; import HomePage from "../components/home-page";
import IDBlock from "../components/identity-block"; import IDBlock from "../components/identity-block";
import WCard from "../components/werefox-card"; import WCard from "../components/werefox-card";
import ICard from "../components/introduction-card";
import PBlock from "../components/page-block"; import PBlock from "../components/page-block";
// An object listing pages folks can visit // An object listing pages folks can visit
@ -8,15 +9,18 @@ export async function getStaticProps() {
const fs = require("fs"); const fs = require("fs");
const yaml = require("js-yaml"); const yaml = require("js-yaml");
let IDENTITIES = {}; let IDENTITIES = {};
let INTRODUCTION = {};
let PAGES = {}; let PAGES = {};
let PARTNERS = {}; let PARTNERS = {};
try { try {
let fileContent = fs.readFileSync("./data/identities.yml", "utf8"); let fileContent = fs.readFileSync("./data/identities.yml", "utf8");
IDENTITIES = yaml.load(fileContent); IDENTITIES = yaml.load(fileContent);
fileContent = fs.readFileSync("./data/introduction.yml", "utf8");
INTRODUCTION = yaml.load(fileContent);
fileContent = fs.readFileSync("./data/pages.yml", "utf8"); fileContent = fs.readFileSync("./data/pages.yml", "utf8");
PAGES = yaml.load(fileContent); PAGES = yaml.load(fileContent);
fileContent = fs.readFileSync("./data/partners.yml", "utf8"); fileContent = fs.readFileSync("./data/identities/partners.yml", "utf8");
PARTNERS = yaml.load(fileContent); PARTNERS = yaml.load(fileContent);
} catch (e) { } catch (e) {
console.log(e); console.log(e);
@ -24,35 +28,26 @@ export async function getStaticProps() {
return { return {
props: { props: {
IDENTITIES, IDENTITIES,
INTRODUCTION,
PAGES, PAGES,
PARTNERS, PARTNERS,
}, },
}; };
} }
export default function Home({ IDENTITIES, PAGES, PARTNERS }) { export default function Home({ IDENTITIES, INTRODUCTION, PAGES, PARTNERS }) {
const partnerslen = PARTNERS ? Object.keys(PARTNERS).length : 0; const partnerslen = PARTNERS ? Object.keys(PARTNERS).length : 0;
let introarray = INTRODUCTION["intro"].split("\n");
introarray = introarray.slice(0, introarray.length - 1);
const introdict = Object.assign({}, introarray);
return ( return (
<HomePage page_title="About A Werefox" card_title="Hi! I'm Alexis Werefox!"> <HomePage page_title="About A Werefox" card_title="Hi! I'm Alexis Werefox!">
<WCard innerText="Basic Info"> <WCard innerText="Basic Info">
<IDBlock identities={IDENTITIES} partners={partnerslen} /> <IDBlock identities={IDENTITIES} partners={partnerslen} />
</WCard> </WCard>
<WCard innerText="Welcome to my little info site!"> <WCard innerText="Welcome to my little info site!">
<p className="p-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue"> <ICard introduction={introdict} />
I'd describe myself as somewhere between a hot date and a hot mess.
Just a witchy foxxo programmer trying to make it in the world tbh.
</p>
<p className="pl-4 pr-4 pb-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
Feel free to click/tap any of the cute buttons above this to learn
more about my different aspects of personality.
</p>
<p className="pl-4 pr-4 pb-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
Down below, I've got some more neat little pages and useful info you
can look at.
</p>
<p className="pl-4 pr-4 pb-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
Please do look around and enjoy your stay!~ 💙
</p>
</WCard> </WCard>
<WCard innerText="Neat Pages!"> <WCard innerText="Neat Pages!">
<PBlock pages={PAGES} /> <PBlock pages={PAGES} />

View File

@ -8,7 +8,7 @@ export async function getStaticProps() {
let OTHER = {}; let OTHER = {};
try { try {
let fileContent = fs.readFileSync("./data/other.yml", "utf8"); let fileContent = fs.readFileSync("./data/projects/other.yml", "utf8");
OTHER = yaml.load(fileContent); OTHER = yaml.load(fileContent);
} catch (e) { } catch (e) {
console.log(e); console.log(e);

View File

@ -8,7 +8,7 @@ export async function getStaticProps() {
let PRIVATE = {}; let PRIVATE = {};
try { try {
let fileContent = fs.readFileSync("./data/private.yml", "utf8"); let fileContent = fs.readFileSync("./data/projects/private.yml", "utf8");
PRIVATE = yaml.load(fileContent); PRIVATE = yaml.load(fileContent);
} catch (e) { } catch (e) {
console.log(e); console.log(e);

View File

@ -8,7 +8,7 @@ export async function getStaticProps() {
let SERVICES = {}; let SERVICES = {};
try { try {
let fileContent = fs.readFileSync("./data/services.yml", "utf8"); let fileContent = fs.readFileSync("./data/projects/services.yml", "utf8");
SERVICES = yaml.load(fileContent); SERVICES = yaml.load(fileContent);
} catch (e) { } catch (e) {
console.log(e); console.log(e);

View File

@ -8,7 +8,7 @@ export async function getStaticProps() {
let STREAMING = {}; let STREAMING = {};
try { try {
let fileContent = fs.readFileSync("./data/streaming.yml", "utf8"); let fileContent = fs.readFileSync("./data/projects/streaming.yml", "utf8");
STREAMING = yaml.load(fileContent); STREAMING = yaml.load(fileContent);
} catch (e) { } catch (e) {
console.log(e); console.log(e);

View File

@ -1,83 +1,10 @@
import BasicPage from "../../components/basic-page"; import BasicPage from "../../components/basic-page";
import WCard from "../../components/werefox-card"; import SBlock from "../../components/support-block";
import Link from "next/link";
import Iframe from "react-iframe";
export default function Support() { export default function Support() {
return ( return (
<BasicPage page_title="Support" card_title="Support Me!"> <BasicPage page_title="Support" card_title="Support Me!">
<WCard <SBlock />
innerText="I would sincerely appreciate if you would throw some financial
support my way!! 💙"
>
<div className="p-4 space-y-4">
<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"
/>
</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"
url="https://ko-fi.com/alexis_werefox/?hidefeed=true&widget=true&embed=true&preview=true"
height="680"
></Iframe>
</div>
</div>
</details>
</div>
</div>
</WCard>
</BasicPage> </BasicPage>
); );
} }