Partner page now supports custom emoji in bio and fields, updated info on that page as well.

src/info/components/partner-card.js

@@ -2,11 +2,11 @@ import Link from "next/link";
 import Image from "next/image";
 
 export function validURL(str) {
-  var pattern = new RegExp(
+  const 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
+      "(\\:\\d+)?(\\/[-a-z\\d%_.~+$]*)*" + // port and path
       "(\\?[;&a-z\\d%_.~+=-]*)?" + // query string
       "(\\#[-a-z\\d_]*)?$",
     "i"
@@ -14,7 +14,37 @@ export function validURL(str) {
   return !!pattern.test(str);
 }
 
-export function renderPossibleURLField(field) {
+export function replaceWithImageTags(index, str, emoji_path) {
+  if (index % 2 === 0) {
+    return <p className="inline">{`${str}`}</p>;
+  } else {
+    return (
+      <>
+        <span className="object-contain relative inline-block w-8 h-8 mb-1 align-middle">
+          <Image src={emoji_path} layout="fill" objectFit="contain" alt={str} />
+        </span>
+      </>
+    );
+  }
+}
+
+export function formatCustomEmoji(str, emoji_paths) {
+  const emoji_pattern = new RegExp(/(:[A-Za-z_-]+:)/, "g");
+  const values = emoji_pattern[Symbol.split](str);
+  if (Boolean(emoji_paths)) {
+    return (
+      <>
+        {Object.keys(values).map((v) =>
+          replaceWithImageTags(v, values[v], emoji_paths[values[v]])
+        )}
+      </>
+    );
+  } else {
+    return <></>;
+  }
+}
+
+export function renderPossibleURLField(field, emoji_paths) {
   if (validURL(field)) {
     return (
       <Link href={field}>
@@ -28,18 +58,22 @@ export function renderPossibleURLField(field) {
   } else {
     return (
       <div className="p-2 flex min-w-full min-h-full justify-center items-center align-middle ring-2 rounded-sm ring-werefox-pink-dark dark:ring-werefox-pink group-hover:ring-werefox-blue-dark dark:group-hover:ring-werefox-blue">
-        {field}
+        {formatCustomEmoji(field, emoji_paths)}
       </div>
     );
   }
 }
 
-export function renderPossibleFields(fields) {
+export function renderPossibleFields(fields, emoji_paths) {
   if (Boolean(fields)) {
     return Object.keys(fields).map((field) => (
       <div className="grid grid-cols-2 space-x-4" key={field}>
-        <div className="order-1">{renderPossibleURLField(field)}</div>
-        <div className="order-2">{renderPossibleURLField(fields[field])}</div>
+        <div className="order-1">
+          {renderPossibleURLField(field, emoji_paths)}
+        </div>
+        <div className="order-2">
+          {renderPossibleURLField(fields[field], emoji_paths)}
+        </div>
       </div>
     ));
   } else {
@@ -47,24 +81,38 @@ export function renderPossibleFields(fields) {
   }
 }
 
-export function renderPossibleBio(bio) {
+export function renderPossibleBio(bio, emoji_paths) {
   if (Boolean(bio)) {
     let bioarray = bio.split("\n");
     bioarray = bioarray.slice(0, bioarray.length - 1);
     const biodict = Object.assign({}, bioarray);
     return Object.keys(biodict).map((bio) => (
-      <div key={bio}>{biodict[bio] == "" ? <br /> : biodict[bio]}</div>
+      <div key={bio}>
+        {biodict[bio] == "" ? (
+          <br />
+        ) : (
+          formatCustomEmoji(biodict[bio], emoji_paths)
+        )}
+      </div>
     ));
   } else {
     return <></>;
   }
 }
 
-export default function PartnerCard({ src, alt, url, fields, bio, user }) {
+export default function PartnerCard({
+  src,
+  alt,
+  url,
+  fields,
+  bio,
+  user,
+  emoji_paths,
+}) {
   const finalsrc = Boolean(src) ? src : "/images/logo.png";
 
   return (
-    <div className="p-4 flex-column space-y-4 break-all sm:text-sm text-xs text-center rounded-sm ring-2 ring-werefox-pink-dark dark:ring-werefox-pink">
+    <div className="p-4 flex-column space-y-4 sm:break-normal break-all sm:text-sm text-xs text-center rounded-sm ring-2 ring-werefox-pink-dark dark:ring-werefox-pink">
       <Link href={url}>
         <a target="_blank">
           <div className="p-4 flex group rounded-sm ring-2 ring-werefox-pink-dark dark:ring-werefox-pink hover:ring-werefox-blue-dark dark:hover:ring-werefox-blue text-werefox-pink-dark dark:text-werefox-pink hover:text-werefox-blue-dark dark:hover:text-werefox-blue hover:animate-yip transition">
@@ -78,15 +126,15 @@ export default function PartnerCard({ src, alt, url, fields, bio, user }) {
             </div>
             <div className="order-2 flex-5 space-y-4">
               <div className="p-2 rounded-sm ring-2 ring-werefox-pink-dark dark:ring-werefox-pink group-hover:ring-werefox-blue-dark dark:group-hover:ring-werefox-blue">
-                {renderPossibleBio(bio)}
+                {renderPossibleBio(bio, emoji_paths)}
                 {`- @${user}`}
               </div>
             </div>
           </div>
         </a>
       </Link>
-      <div className="flex-column space-y-4 text-werefox-pink-dark dark:text-werefox-pink">
-        {renderPossibleFields(fields)}
+      <div className="flex-column space-y-4 break-all text-werefox-pink-dark dark:text-werefox-pink">
+        {renderPossibleFields(fields, emoji_paths)}
       </div>
     </div>
   );

src/info/data/identities/partners.yml

@@ -9,7 +9,7 @@ lindsays:
     queeeeer: ":qhTrans: :qhPolyro: :qhPolyam:"
     LiberaPay: "https://liberapay.com/Lindsayschmocker"
   bio: |
-    Lindsay. She/her. US/CO. audio engineer, photographer, digital artist, sysadmin, network engineer, metal fabricator (hiatus on fabricating). very not vanilla. otherkin-furry on main. slowly converting into Judaism. always burning the candle for those we've lost. 🕯️ may their memories be for a blessing. Never again means NEVER again; SRA member. Black lives always have, do, and always will matter.
+    Lindsay. She/her. US/CO. audio engineer, photographer, digital artist, sysadmin, network engineer, metal fabricator (hiatus on fabricating). very not vanilla. otherkin-furry on main. slowly converting into Judaism. always burning the candle for those we've lost. :ms_candle: may their memories be for a blessing. Never again means NEVER again; SRA member. Black lives always have, do, and always will matter.
 
     ASK before DMing.
 
@@ -41,5 +41,21 @@ karma:
 plausocks:
   url: "https://masto.werefox.dev/@plausocks"
   avi: "/images/plausocks.png"
+  fields:
+    Ko-fi: "https://ko-fi.com/plausocks"
+    Paypal: "https://paypal.me/plausocks"
+    CashApp: "https://cash.app/$plausocks"
   bio: |
     am cat, am gay
+
+    ~Transgender 🏳️‍⚧️ ⚧️ (She/Her), Polyamorous :potion_polyamory: , ADHD, Plural :plural: (newly discovered/still discovering), most definitely neurodivergent :ms_neurodiversity:, CatGirl~ 🏳️‍🌈
+
+    Please don't follow me if you're under 18 🔞
+
+    Taken by 4 Partners~
+    - @alexis@masto.werefox.dev 💙 :alexis:
+    - @aowora@vulpine.club 💜 :Elizafox:
+    - @violet@vulpine.club 💜 :violet_bat:
+    - @cdmnky@vulpine.club 💚 :sierra:
+
+    I Live in Tulsa, Oklahoma

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

@@ -8,21 +8,51 @@ export async function getStaticProps() {
   const fs = require("fs");
   const yaml = require("js-yaml");
   let PARTNERS = {};
+  let emoji_paths = {};
 
   try {
     let fileContent = fs.readFileSync("./data/identities/partners.yml", "utf8");
     PARTNERS = yaml.load(fileContent);
+    const emoji_pattern = new RegExp(/(:[A-Za-z_-]+:)/, "g");
+    let emoji = [];
+    Object.keys(PARTNERS).forEach((p, i) => {
+      Array.from(emoji_pattern[Symbol.matchAll](PARTNERS[p].bio)).forEach(
+        (e, i) => {
+          emoji.push(e[0]);
+        }
+      );
+      Object.keys(PARTNERS[p].fields).forEach((f, i) => {
+        Array.from(emoji_pattern[Symbol.matchAll](f)).forEach((e, i) => {
+          emoji.push(e[0]);
+        });
+        Array.from(
+          emoji_pattern[Symbol.matchAll](PARTNERS[p].fields[f])
+        ).forEach((e, i) => {
+          emoji.push(e[0]);
+        });
+      });
+    });
+    emoji.forEach((e, i) => {
+      if (fs.existsSync(`./public/emoji/${e}.svg`)) {
+        emoji_paths[e] = `/emoji/${e}.svg`;
+      } else if (fs.existsSync(`./public/emoji/${e}.png`)) {
+        emoji_paths[e] = `/emoji/${e}.png`;
+      } else {
+        emoji_paths[e] = `/emoji/pixel_alexis.png`;
+      }
+    });
   } catch (e) {
     console.log(e);
   }
   return {
     props: {
       PARTNERS,
+      emoji_paths,
     },
   };
 }
 
-export default function Partners({ PARTNERS }) {
+export default function Partners({ PARTNERS, emoji_paths }) {
   if (PARTNERS) {
     return (
       <BasicPage
@@ -44,6 +74,7 @@ export default function Partners({ PARTNERS }) {
               user={partner}
               fields={PARTNERS[partner].fields}
               bio={PARTNERS[partner].bio}
+              emoji_paths={emoji_paths}
             ></PCard>
           ))}
         </IDCard>

src/info/public/emoji/:ms_candle:.svg

@@ -0,0 +1 @@
+<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path clip-rule="evenodd" d="m32 32v-32h-32v32z"/></clipPath><metadata/><path d="m32 32v-32h-32v32z" fill="none"/><g clip-path="url(#a)"><path d="m29 23.125v2c0 2.691-5.825 4.875-13 4.875s-13-2.184-13-4.875v-2c0-1.56 1.957-2.949 5-3.842v-11.283c0-1.417 2.626-2.606 6.152-2.919l1.848-3.081 1.848 3.081c3.526.313 6.152 1.502 6.152 2.919v11.283c3.043.893 5 2.282 5 3.842z" fill="none" stroke="#000" stroke-width="4"/><path d="m4.143 23.125c2.037-1.694 21.677-1.694 23.714 0h1.143v2c0 2.691-5.825 4.875-13 4.875s-13-2.184-13-4.875v-2z" fill="#737373"/><ellipse cx="16" cy="23.125" fill="#a6a6a6" rx="13" ry="4.875"/><path d="m24 23h-.007c.005.041.007.083.007.125 0 1.656-3.585 3-8 3s-8-1.344-8-3c0-.042.002-.084.007-.125h-.007v-9h16z" fill="#ead9c1"/><path d="m24 14c0 1.656-3.585 3-8 3s-8-1.344-8-3v-6h16z" fill="#f4ebdd"/><ellipse cx="16" cy="8" fill="#f9f4ec" rx="8" ry="3"/><ellipse cx="16" cy="8" fill="#f0e5d4" rx="4.571" ry="1.714"/><path d="m16 9s-.693-.462-1.413-.942c-.889-.592-1.155-1.778-.606-2.693.875-1.459 2.019-3.365 2.019-3.365s1.144 1.906 2.019 3.365c.549.915.283 2.101-.606 2.693-.72.48-1.413.942-1.413.942z" fill="#f5a608"/><path d="m16 8s0 0-.001 0c-.551-.241-.961-.722-1.111-1.304-.151-.582-.027-1.201.338-1.68.425-.558.774-1.016.774-1.016s.349.458.774 1.016c.365.479.489 1.098.338 1.68-.15.582-.56 1.063-1.111 1.304-.001 0-.001 0-.001 0z" fill="#ffdb93"/></g></svg>