Finished up the partners page.

src/info/components/love-card.js

@@ -1,8 +1,42 @@
 import Link from "next/link";
 
-export default function TestimonialCard({ src, alt, url, innerText, user }) {
-  const finalsrc = Boolean(src) ? src : "/images/werefox_logo.png";
-  const isMe = (user == "Shadow8t4") ? "text-werefox-blue-dark dark:text-werefox-blue": "text-werefox-pink-dark dark:text-werefox-pink"
+export function validURL(str) {
+  var pattern = new RegExp(
+    "^(https?:\\/\\/)?" + // protocol
+      "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" + // domain name
+      "((\\d{1,3}\\.){3}\\d{1,3}))" + // OR ip (v4) address
+      "(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" + // port and path
+      "(\\?[;&a-z\\d%_.~+=-]*)?" + // query string
+      "(\\#[-a-z\\d_]*)?$",
+    "i"
+  ); // fragment locator
+  return !!pattern.test(str);
+}
+
+export function renderPossibleURLField(field) {
+  if (validURL(field)) {
+    return (
+      <Link href={field}>
+        <a className="p-2 text-center overflow-ellipsis overflow-hidden ring-2 ring-werefox-grey-light dark:ring-werefox-grey-darker rounded-lg bg-werefox-grey-lightest dark:bg-werefox-grey">
+          {field}
+        </a>
+      </Link>
+    );
+  } else {
+    return (
+      <p className="p-2 text-center overflow-ellipsis overflow-hidden ring-2 ring-werefox-grey-light dark:ring-werefox-grey-darker rounded-lg bg-werefox-grey-lightest dark:bg-werefox-grey">
+        {field}
+      </p>
+    );
+  }
+}
+
+export default function TestimonialCard({ src, alt, url, fields, bio, user }) {
+  const finalsrc = Boolean(src) ? src : "/images/logo.png";
+  const isMe =
+    user == "Shadow8t4"
+      ? "text-werefox-blue-dark dark:text-werefox-blue"
+      : "text-werefox-pink-dark dark:text-werefox-pink";
 
   return (
     <div className="rounded-lg container flex overflow-hidden ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
@@ -18,9 +52,19 @@ export default function TestimonialCard({ src, alt, url, innerText, user }) {
           </div>
         </a>
       </Link>{" "}
-      <div className={`animate-wiggle flex-5 p-4 sm:text-lg text-xs text-center ${isMe}`}>
+      <div className={`flex-5 p-4 sm:text-sm text-xs text-center ${isMe}`}>
+        <div className="grid grid-cols-1 gap-2">
+          <div className="ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker rounded-lg p-2 grid grid-cols-2 grid-rows-1 gap-2 bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
+            {Object.keys(fields).map((field) => (
+              <>
+                {renderPossibleURLField(field)}
+                {renderPossibleURLField(fields[field])}
+              </>
+            ))}
+          </div>
+          <div className="ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker rounded-lg p-2 bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
             <p>
-          {innerText}
+              {bio}
               <br />
               {"- "}
               <Link href={url}>
@@ -29,5 +73,7 @@ export default function TestimonialCard({ src, alt, url, innerText, user }) {
             </p>
           </div>
         </div>
+      </div>
+    </div>
   );
 }

src/info/pages/hrt/index.js

@@ -1,7 +1,5 @@
-import Head from "next/head";
 import BasicPage from "../../components/basic-page-template";
 import WCard from "../../components/werefox-card";
-import MS from "../../components/mutant-standard";
 
 export default function HRT() {
   return (

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

@@ -1,12 +1,48 @@
-import BasicPage from "../../../components/basic-page-template"
+import BasicPage from "../../../components/basic-page-template";
+import WCard from "../../../components/werefox-card";
+import LCard from "../../../components/love-card";
 
-export default function HRT() {
+// Use this to list out partner info on this page. >w>
+
+const PARTNERS = {
+  // heatherhorns: {
+  //   url: "",
+  //   avi: "",
+  //   fields: {
+  //     "": "",
+  //   },
+  //   bio: ``,
+  // },
+};
+
+export default function Partners() {
+  if (PARTNERS == null) {
     return (
-    <BasicPage
-      page_title="Partners"
-      card_title="Partners!"
-    >
-
+      <BasicPage page_title="Partners" card_title="Partners!">
+        {Object.keys(PARTNERS).map((partner) => (
+          <LCard
+            key={PARTNERS[partner].url}
+            src={PARTNERS[partner].avi}
+            alt={`${partner}'s Avatar`}
+            url={PARTNERS[partner].url}
+            user={partner}
+            fields={PARTNERS[partner].fields}
+            bio={PARTNERS[partner].bio}
+          ></LCard>
+        ))}
+      </BasicPage>
+    );
+  } else {
+    return (
+      <BasicPage page_title="Partners" card_title="Partners!">
+        <WCard>
+          <p className="p-6 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
+            Oh! It looks like I don't have any partners at the moment.
+            <br />
+            Oh well!
+          </p>
+        </WCard>
       </BasicPage>
     );
   }
+}

src/info/pages/index.js

@@ -1,9 +1,6 @@
-import Head from "next/head";
-import Image from "next/image";
 import BasicPage from "../components/basic-page-template";
 import IDButton from "../components/identity-button";
 import WCard from "../components/werefox-card";
-import MS from "../components/mutant-standard";
 
 export default function Home() {
   return (

src/info/tailwind.config.js

@@ -8,12 +8,16 @@ module.exports = {
       },
       colors: {
         "werefox-blue": {
-          DEFAULT: "#60A4FF",
-          dark: "#2885ff",
+          DEFAULT: "#75B1FF",
+          dark: "#0052B8",
+          darker: "#0052B8",
+          darkest: "#0052B8",
         },
         "werefox-pink": {
-          DEFAULT: "#ff84c5",
-          dark: "#ff329f",
+          DEFAULT: "#FF84CA",
+          dark: "#9E0054",
+          darker: "#8A0040",
+          darkest: "#75003F",
         },
         "werefox-grey": {
           lightest: "#EEE",