I finished the testimonials page oh my god

Dockerfile

@@ -4,6 +4,7 @@ RUN apk update && \
         apk add --no-cache bash
 
 RUN npm install --save next && \
-        npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
+        npm install -D tailwindcss@latest postcss@latest autoprefixer@latest && \
+        npm install --save axios
 
 WORKDIR /usr/src/app

src/info/components/identity-button.js

@@ -14,7 +14,7 @@ export default function IdentityButton({
       <Link href={url}>
         <a
           target="_blank"
-          className={`${extraClasses} block rounded-lg text-lg text-center text-werefox-grey-lighter dark:text-werefox-grey-dark bg-werefox-grey dark:bg-werefox-grey-lightest transition hover:bg-werefox-grey-dark dark:hover:bg-werefox-grey-light`}
+          className={`${extraClasses} block ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker rounded-lg text-lg text-center text-werefox-grey-lighter dark:text-werefox-grey-dark bg-werefox-grey dark:bg-werefox-grey-lightest transition hover:bg-werefox-grey-dark dark:hover:bg-werefox-grey-light`}
         >
           {images.map((source) => (
             <span

src/info/components/mutant-standard.js

@@ -0,0 +1,24 @@
+import Link from "next/link";
+import WCard from "./werefox-card"
+
+export default function MutantStandard() {
+  return (
+    <WCard>
+      <footer className="p-4">
+        <p className="text-center text-xs text-werefox-grey-darker dark:text-werefox-grey-lighter">
+          This site uses{" "}
+          <Link href="https://mutant.tech">
+            <a>Mutant Standard emoji</a>
+          </Link>
+          , which are licensed under a{" "}
+          <Link href="https://creativecommons.org/licenses/by-nc-sa/4.0/">
+            <a>
+              Creative Commons Attribution-NonCommercial-ShareAlike 4.0
+              International License
+            </a>
+          </Link>
+        </p>
+      </footer>
+    </WCard>
+  );
+}

src/info/components/testimonial-card.js

@@ -0,0 +1,33 @@
+import Image from "next/image";
+import Link from "next/link";
+
+export default function TestimonialCard({ src, alt, url, innerText, user }) {
+  const finalsrc = Boolean(src) ? src : "/images/werefox_logo.png";
+
+  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">
+      <Link href={url}>
+        <a>
+          <div className="flex-1">
+            {" "}
+            <img
+              className="rounded-lg sm:w-32 w-16"
+              src={finalsrc}
+              alt={alt}
+            />{" "}
+          </div>
+        </a>
+      </Link>{" "}
+      <div className="animate-wiggle flex-5 p-4 sm:text-lg text-xs text-center text-werefox-pink-dark dark:text-werefox-pink">
+        <p>
+          {innerText}
+          <br />
+          {"- "}
+          <Link href={url}>
+            <a target="_blank">{`@${user}`}</a>
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}

src/info/components/werefox-card.js

@@ -0,0 +1,52 @@
+import Image from "next/image";
+import Link from "next/link";
+
+export default function WerefoxCard({
+  isTitle,
+  isCardButton,
+  extraClasses,
+  imageObj,
+  innerText,
+  url,
+  children,
+}) {
+  const images = Array(imageObj).flat();
+  if (isTitle) {
+    return (
+      <div className="rounded-lg container ring-4 ring-werefox-blue bg-werefox-grey-light dark:bg-werefox-grey">
+        {children}
+      </div>
+    );
+  } else if (isCardButton) {
+    return (
+      <div className="container">
+        <Link href={url}>
+          <a
+            className={`${extraClasses} block ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker rounded-lg p-4 text-xl text-center text-werefox-grey dark:text-werefox-grey-dark bg-werefox-grey-lighter dark:bg-werefox-grey-lightest transition hover:bg-werefox-grey-lightest dark:hover:bg-werefox-grey-light`}
+          >
+            {images.map((source) => (
+              <span
+                key={source.src}
+                className="relative inline-block w-8 h-8 align-middle mb-1"
+              >
+                {" "}
+                <Image
+                  src={source.src}
+                  layout="fill"
+                  objectFit="contain"
+                  alt={source.alt}
+                />{" "}
+              </span>
+            ))}{" "}
+            {innerText}
+          </a>
+        </Link>
+      </div>
+    );
+  }
+  return (
+    <div className="rounded-lg container ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
+      {children}
+    </div>
+  );
+}

src/info/pages/api/hello.js

@@ -1,5 +1,5 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 
 export default (req, res) => {
-  res.status(200).json({ name: 'John Doe' })
+  res.status(200).json({ name: 'Alexis Werefox' })
 }

src/info/pages/hrt/index.js

@@ -0,0 +1,43 @@
+import Head from "next/head";
+import WCard from "../../components/werefox-card";
+import MS from "../../components/mutant-standard";
+
+export default function HRT() {
+  return (
+    <div className="min-h-screen bg-werefox-grey-lighter dark:bg-werefox-grey-dark font-nerd">
+      <Head>
+        <title>Alexis Werefox HRT Tracker</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <div className="container space-y-4 mx-auto px-4 py-4">
+        <WCard
+          isCardButton="true"
+          extraClasses=""
+          imageObj={[
+            { src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" },
+            { src: "/emoji/blue_heart.svg", alt: "Blue heart" },
+          ]}
+          innerText="Take me back home!"
+          url="/"
+        />
+        <WCard>
+          <p className="p-6 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
+            Oh no I haven't actually finished this page but I started on<br/>
+            December 11th, 2020
+          </p>
+        </WCard>
+        <WCard
+          isCardButton="true"
+          extraClasses=""
+          imageObj={[
+            { src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" },
+            { src: "/emoji/blue_heart.svg", alt: "Blue heart" },
+          ]}
+          innerText="Take me back home!"
+          url="/"
+        />
+        <MS />
+      </div>
+    </div>
+  );
+}

src/info/pages/index.js

@@ -1,7 +1,9 @@
 import Head from "next/head";
 import Link from "next/link";
 import Image from "next/image";
-import IDButton from "./components/identity-button";
+import IDButton from "../components/identity-button";
+import WCard from "../components/werefox-card";
+import MS from "../components/mutant-standard";
 
 export default function Home() {
   return (
@@ -11,12 +13,12 @@ export default function Home() {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <div className="container space-y-4 mx-auto px-4 py-4">
-        <div className="rounded-lg container ring-4 ring-werefox-blue bg-werefox-grey-light dark:bg-werefox-grey">
+        <WCard isTitle="true">
           <h1 className="p-4 text-xl text-center text-werefox-blue-dark dark:text-werefox-blue">
             <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
               {" "}
               <Image
-                src="/images/pixel_alexis.png"
+                src="/emoji/pixel_alexis.png"
                 layout="fill"
                 objectFit="contain"
                 alt="Pixel Alexis!"
@@ -25,8 +27,8 @@ export default function Home() {
             {"- "}
             Hi! I'm Alexis Werefox!
           </h1>
-        </div>
+        </WCard>
-        <div className="rounded-lg container ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
+        <WCard>
           <div className="grid xl:grid-rows-2 xl:grid-cols-5 sm:grid-rows-3 sm:grid-cols-3 grid-rows-9 grid-cols-1 gap-2">
             <IDButton
               extraClasses=""
@@ -37,14 +39,14 @@ export default function Home() {
             <IDButton
               extraClasses="xl:pt-1 xl:align-text-bottom xl:text-sm xl:min-h-full"
               imageObj={[
-                {
-                  src: "/emoji/female_symbol.svg",
-                  alt: "Female symbol",
-                },
                 {
                   src: "/emoji/transgender_flag.svg",
                   alt: "Transgender flag",
                 },
+                {
+                  src: "/emoji/female_symbol.svg",
+                  alt: "Female symbol",
+                },
               ]}
               innerText="Trans-femme"
               url="https://trans.wikia.org/wiki/Transfeminine"
@@ -119,30 +121,35 @@ export default function Home() {
               url=""
             />
           </div>
-        </div>
+        </WCard>
-        <div className="rounded-lg container ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
+        <WCard
-          <p className="p-4 text-lg text-center text-werefox-pink-dark dark:text-werefox-pink">
+          isCardButton="true"
-            Somewhere between a hot date and a hot mess. Just a witchy foxxo
+          extraClasses=""
-            programmer trying to make it in the world tbh.
+          imageObj={{
+            src: "/emoji/trans_heart.png",
+            alt: "Transgender heart",
+          }}
+          innerText="HRT Tracker!"
+          url="/hrt"
+        />
+        <WCard>
+          <p className="p-6 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
+            Somewhere between a hot date and a hot mess.
+            <br />
+            Just a witchy foxxo programmer trying to make it in the world tbh.
           </p>
-        </div>
+        </WCard>
-        <div className="rounded-lg container ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
+        <WCard
-          <footer className="p-4">
+          isCardButton="true"
-            <p className="text-center text-xs text-werefox-grey-darker dark:text-werefox-grey-lighter">
+          extraClasses=""
-              This site uses{" "}
+          imageObj={{
-              <Link href="https://mutant.tech">
+            src: "/emoji/awoo.svg",
-                <a>Mutant Standard emoji</a>
+            alt: "Testimonials",
-              </Link>
+          }}
-              , which are licensed under a{" "}
+          innerText="See Testimonials!"
-              <Link href="https://creativecommons.org/licenses/by-nc-sa/4.0/">
+          url="/testimonials"
-                <a>
+        />
-                  Creative Commons Attribution-NonCommercial-ShareAlike 4.0
+        <MS />
-                  International License
-                </a>
-              </Link>
-            </p>
-          </footer>
-        </div>
       </div>
     </div>
   );

src/info/pages/testimonials/index.js

@@ -0,0 +1,138 @@
+import Head from "next/head";
+import WCard from "../../components/werefox-card";
+import TCard from "../../components/testimonial-card";
+import MS from "../../components/mutant-standard";
+import axios from "axios";
+
+// Async functions to grab user avatars server-side
+
+export const getIcon = async ({ json, name }) =>
+  await axios.get(json).then(
+    ({ data }) => [name, data["icon"]["url"]],
+    (error) => {
+      console.log(error)
+      return [name, null];
+    }
+  );
+
+export const getStaticProps = async () => {
+  const promises = Object.entries(USERS).map(([name, { json }]) =>
+    getIcon({ name, json })
+  );
+  const iconUrls = await Promise.all(promises);
+  return {
+    props: {
+      iconUrls: iconUrls.reduce(
+        (acc, [name, url]) => ({ ...acc, [name]: url }),
+        {}
+      ),
+    },
+  };
+};
+
+// This is where you put the testimonial users' info
+
+const USERS = {
+  colabunny: {
+    json: "https://yiff.life/@colabunny.json",
+    url: "https://yiff.life/@colabunny",
+    content: '"please stay your jokes are funny and smart"',
+  },
+  ElfLord: {
+    url: "https://freedom.horse/@ElfLord",
+    json: "https://freedom.horse/@ElfLord.json",
+    content: `"Someday I'm gonna visit you in Texas, and when I get there, I'm going to realize you don't live in Texas at all, and I'm in the wrong state"`,
+  },
+  Decimal: {
+    url: "https://plush.city/@Decimal",
+    json: "https://plush.city/@Decimal.json",
+    content: `"I will appreciate the heck out of you any day"`
+  },
+  skelly: {
+    url: "https://redroo.ml/@skelly",
+    json: "https://redroo.ml/@skelly.json",
+    content: `"this an an official invitation for any one of you to put 'fuck you i dont give testimonials' as a testimonial by me on your profile"`
+  },
+  Drako_Fenris: {
+    url: "https://yiff.life/@Drako_Fenris",
+    json: "https://yiff.life/@Drako_Fenris.json",
+    content: `"[Alexis' future wife] lives in the ether yet to be revealed. she awaits the day her big tiddie goth gf rides in on her unicorn and rescues her."`
+  },
+  "00dani": {
+    url: "https://vulpine.club/@00dani",
+    json: "https://vulpine.club/@00dani.json",
+    content: `"*falls in love with you* haha whoopsies 😳"`
+  },
+  Gumby: {
+    url: "https://puppy.cafe/@Gumby",
+    json: "https://puppy.cafe/@Gumby.json",
+    content: `"im love alexis a lot 💚 🐀"`
+  },
+  AshBunny: {
+    url: "https://vulpine.club/@AshBunny",
+    json: "https://vulpine.club/@AshBunny.json",
+    content: `"heck. I don't think I can take all of this support."`
+  },
+  heatherhorns: {
+    url: "https://plush.city/@heatherhorns",
+    json: "https://plush.city/@heatherhorns.json",
+    content: `";~;
+
+    gpsd gosh"`
+  },
+  lindsays: {
+    url: "https://hackers.town/@lindsays",
+    json: "https://hackers.town/@lindsays.json",
+    content: `"She's an amazing, sweet, beautiful dork, and a spectacular best friend."`
+  },
+};
+
+export default function Testimonials({ iconUrls }) {
+  return (
+    <div className="min-h-screen bg-werefox-grey-lighter dark:bg-werefox-grey-dark font-nerd">
+      <Head>
+        <title>Werefox Testimonials</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <div className="container space-y-4 mx-auto px-4 py-4">
+        <WCard
+          isCardButton="true"
+          extraClasses=""
+          imageObj={[
+            { src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" },
+            { src: "/emoji/blue_heart.svg", alt: "Blue heart" },
+          ]}
+          innerText="Take me back home!"
+          url="/"
+        />
+        <WCard>
+          <p className="p-6 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
+            Sometimes, people say some nice things about me. Here are some
+            examples!
+          </p>
+        </WCard>
+        {Object.keys(USERS).map((user) => (
+          <TCard
+            key={USERS[user].url}
+            src={iconUrls[user]}
+            alt={`${user}'s Avatar`}
+            url={USERS[user].url}
+            user={user}
+            innerText={USERS[user].content}
+          />
+        ))}
+        <WCard
+          isCardButton="true"
+          extraClasses=""
+          imageObj={[
+            { src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" },
+            { src: "/emoji/blue_heart.svg", alt: "Blue heart" },
+          ]}
+          innerText="Take me back home!"
+          url="/"
+        />
+        <MS />
+      </div>
+    </div>
+  );
+}

src/info/tailwind.config.js

@@ -24,6 +24,18 @@ module.exports = {
           darker: "#121212",
         },
       },
+      flex: {
+        5: "5 5 0%",
+      },
+      keyframes: {
+        wiggle: {
+          "0%, 100%": { transform: "rotate(-2deg)" },
+          "50%": { transform: "rotate(2deg)" },
+        },
+      },
+      animation: {
+        wiggle: "wiggle 5s ease-in-out infinite",
+      },
     },
   },
   variants: {

start.sh

@@ -16,9 +16,10 @@ if [ ! -d "./src/info" ]; then
     sudo chown -R $USER:$USER ./src
 fi
 
-if [ $MODE == "dev" ] || [ $MODE == "build" ] || [ $MODE == "prod" ]; then
+if [ $MODE == "dev" ] || [ $MODE == "build" ] || [ $MODE == "start" ]; then
     sudo MODE=$MODE docker-compose up --build --force-recreate --remove-orphans -d
+    sudo docker-compose logs -f
 else
-    echo "Please use 'dev', 'build', or 'prod' as an argument."
+    echo "Please use 'dev', 'build', or 'start' as an argument."
     exit 1
 fi