beginning refactor, started migrating support page code to components.

src/info/components/introduction-card.js

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

src/info/components/support-block.js

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

src/info/data/introduction.yml

@@ -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!~ 💙

src/info/pages/identities/partners/index.js

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

src/info/pages/index.js

@@ -1,6 +1,7 @@
 import HomePage from "../components/home-page";
 import IDBlock from "../components/identity-block";
 import WCard from "../components/werefox-card";
+import ICard from "../components/introduction-card";
 import PBlock from "../components/page-block";
 
 // An object listing pages folks can visit
@@ -8,15 +9,18 @@ export async function getStaticProps() {
   const fs = require("fs");
   const yaml = require("js-yaml");
   let IDENTITIES = {};
+  let INTRODUCTION = {};
   let PAGES = {};
   let PARTNERS = {};
 
   try {
     let fileContent = fs.readFileSync("./data/identities.yml", "utf8");
     IDENTITIES = yaml.load(fileContent);
+    fileContent = fs.readFileSync("./data/introduction.yml", "utf8");
+    INTRODUCTION = yaml.load(fileContent);
     fileContent = fs.readFileSync("./data/pages.yml", "utf8");
     PAGES = yaml.load(fileContent);
-    fileContent = fs.readFileSync("./data/partners.yml", "utf8");
+    fileContent = fs.readFileSync("./data/identities/partners.yml", "utf8");
     PARTNERS = yaml.load(fileContent);
   } catch (e) {
     console.log(e);
@@ -24,35 +28,26 @@ export async function getStaticProps() {
   return {
     props: {
       IDENTITIES,
+      INTRODUCTION,
       PAGES,
       PARTNERS,
     },
   };
 }
 
-export default function Home({ IDENTITIES, PAGES, PARTNERS }) {
+export default function Home({ IDENTITIES, INTRODUCTION, PAGES, PARTNERS }) {
   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 (
     <HomePage page_title="About A Werefox" card_title="Hi! I'm Alexis Werefox!">
       <WCard innerText="Basic Info">
         <IDBlock identities={IDENTITIES} partners={partnerslen} />
       </WCard>
       <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 innerText="Neat Pages!">
         <PBlock pages={PAGES} />

src/info/pages/projects/other/index.js

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

src/info/pages/projects/private/index.js

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

src/info/pages/projects/services/index.js

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

src/info/pages/projects/streaming/index.js

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

src/info/pages/support/index.js

@@ -1,83 +1,10 @@
 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() {
   return (
     <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>
   );
 }