Cleaning up code and optomizing. Lots of theme changes.

deploy.sh

@@ -0,0 +1,33 @@
+#!/bin/bash
+
+set -xe
+
+APP_FOLDER=info
+CONTAINER_NAME=node
+
+MODE=$1
+x=$(sudo docker container ls | grep next-js | wc -l)
+if [ $x -eq 1 ]; then
+    sudo MODE=$MODE docker-compose rm -sf
+fi
+
+sudo MODE=$MODE docker-compose build
+sudo MODE=$MODE docker-compose run $CONTAINER_NAME bash -c "cd $APP_FOLDER && npm install --silent"
+
+if [ ! -d "./src/$APP_FOLDER" ]; then
+    sudo MODE=$MODE docker-compose run $CONTAINER_NAME npx create-next-app $APP_FOLDER
+    sudo MODE=$MODE docker-compose run $CONTAINER_NAME bash -c "cd $APP_FOLDER && npx tailwindcss init -p"
+    sudo chown -R $USER:$USER ./src
+fi
+
+sudo MODE=$MODE docker-compose run $CONTAINER_NAME bash -c "cd $APP_FOLDER && npx next telemetry disable"
+
+if [ $MODE == "dev" ] || [ $MODE == "start" ]; then
+    sudo MODE=$MODE docker-compose up --build --force-recreate --remove-orphans -d
+    sudo MODE=$MODE docker-compose logs -f
+    elif [ $MODE == "build" ]; then
+    sudo MODE=$MODE docker-compose run $CONTAINER_NAME bash -c "cd $APP_FOLDER && npm run build"
+else
+    echo "Please use 'dev', 'build', or 'start' as an argument."
+    exit 1
+fi

src/info/cache/config.json

@@ -0,0 +1,6 @@
+{
+	"telemetry": {
+		"notifiedAt": "1633568733712",
+		"enabled": false
+	}
+}

src/info/components/contacts-link.js

@@ -1,12 +1,12 @@
+import Image from "next/image";
+
 export default function ContactsLink({ src, alt, url, description, url_text }) {
   return (
     <p className="md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
       <a href={url} target="_blank">
-        <img
+        <span className="object-contain animate-bounce relative inline-block w-6 h-6 align-middle">
-          className="object-contain animate-bounce relative inline-block w-6 h-6 align-middle"
+          <Image src={src} layout="fill" objectFit="contain" alt={alt} />
-          src={src}
+        </span>
-          alt={alt}
-        />
       </a>{" "}
       {description}{" "}
       <a

src/info/components/faq-block.js

@@ -2,7 +2,7 @@ import FCard from "./faq-card";
 
 export default function FAQBlock({ faqs }) {
   return (
-    <>
+    <div className="p-8 space-y-4 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
       {Object.keys(faqs).map((faq) => (
         <FCard
           key={faq}
@@ -12,6 +12,6 @@ export default function FAQBlock({ faqs }) {
           alt={faqs[faq].alt}
         />
       ))}
-    </>
+    </div>
   );
 }

src/info/components/faq-card.js

@@ -1,29 +1,30 @@
+import Image from "next/image";
 import Link from "next/link";
 
 export default function TestimonialCard({ question, answer, src, alt }) {
   const finalsrc = Boolean(src) ? src : "/images/logo.png";
 
   return (
-    <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
+    <div className="space-y-1">
-      <div className="p-2 space-y-2">
+      <div className="ring-2 ring-werefox-pink-dark dark:ring-werefox-pink">
-        <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
         <p className="p-8 text-center text-lg sm:text-xl text-werefox-pink-dark dark:text-werefox-pink">
           {question}
         </p>
       </div>
-        <div className="p-2 flex space-y-2 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
+      <div className="p-2 flex ring-2 ring-werefox-blue-dark dark:ring-werefox-blue">
+        <div className="order-1 flex-shrink-0 relative inline sm:w-32 w-16 min-h-full items-center justify-center align-middle pt-4 pb-4 pl-4">
           <Link href="https://vulpine.club/@shadow8t4">
             <a>
-              <div className="flex-1 pt-4 pb-4 pl-4">
+                <Image
-                <img
-                  className="rounded-lg sm:w-32 w-16"
                   src={finalsrc}
+                  layout="fill"
+                  objectFit="contain"
                   alt={alt}
                 />
-              </div>
             </a>
-          </Link>{" "}
+          </Link>
-          <div className="flex items-center justify-center animate-wiggle flex-5 p-4 sm:text-lg text-xs text-center min-h-full text-werefox-blue-dark dark:text-werefox-blue">
+        </div>
+        <div className="order-2 flex overflow-auto items-center justify-center animate-wiggle p-4 sm:text-lg text-xs text-center sm:min-h-full h-full text-werefox-blue-dark dark:text-werefox-blue">
           <p>
             {answer}
             <br />
@@ -38,6 +39,5 @@ export default function TestimonialCard({ question, answer, src, alt }) {
         </div>
       </div>
     </div>
-    </div>
   );
 }

src/info/components/footer-button.js

@@ -0,0 +1,19 @@
+import Link from "next/link";
+
+export default function footerButton({ url, inner_text, is_external }) {
+  const target = Boolean(is_external) ? is_external : "";
+
+  return (
+    <div className="flex-1 overflow-visible">
+      <Link href={url}>
+        <a target={target}>
+          <div className="ml-1 mr-1 rounded-sm ring-2 ring-werefox-blue-dark dark:ring-werefox-blue hover:ring-werefox-pink-dark dark:hover:ring-werefox-pink  text-werefox-blue-darker dark:text-werefox-blue hover:text-werefox-pink-dark dark:hover:text-werefox-pink transition">
+            <p className="pl-2 pr-2 text-center sm:text-md text-sm">
+              {inner_text}
+            </p>
+          </div>
+        </a>
+      </Link>
+    </div>
+  );
+}

src/info/components/footer-card.js

@@ -1,46 +1,34 @@
-import Link from "next/link";
+import FButton from "./footer-button";
-import WCard from "./werefox-card";
-
 export default function FooterCard() {
   return (
     <footer className="p-4 space-y-2 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
       <div className="flex text-werefox-blue-darker dark:text-werefox-blue">
-        <div className="flex-1 sm:pr-16 pr-4">
+        <div className="flex-1"></div>
-          <p className="text-right sm:text-md text-sm transition">
+        <FButton url="/contacts" inner_text="Contact" />
-            <Link href="/contacts">
+        <FButton
-              <a className="hover:text-werefox-pink-dark dark:hover:text-werefox-pink">
+          url="https://gitea.werefox.dev/shadow8t4/info-werefox-dev"
-                Contact
+          inner_text=" /src"
-              </a>
+          is_external="_blank"
-            </Link>
+        />
-          </p>
+        <div className="flex-1"></div>
-        </div>
-        <div className="flex-1 sm:pl-16 pl-4">
-          <p className="text-left sm:text-md text-sm transition">
-            <Link href="https://gitea.werefox.dev/shadow8t4/info-werefox-dev">
-              <a
-                className="hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
-                target="_blank"
-              >
-                 /src
-              </a>
-            </Link>
-          </p>
-        </div>
       </div>
       <p className="text-center text-xs text-werefox-grey-darkest dark:text-werefox-grey-lightest">
         This site uses{" "}
-        <Link href="https://mutant.tech">
+        <div className="inline-block pt-1 pb-1">
-          <a className="transition hover:text-werefox-grey-darker dark:hover:text-werefox-grey-lighter">
+          <FButton
-            Mutant Standard emoji
+            url="https://mutant.tech"
-          </a>
+            inner_text="Mutant Standard emoji"
-        </Link>
+            is_external="_blank"
+          />
+        </div>
         , which are licensed under a{" "}
-        <Link href="https://creativecommons.org/licenses/by-nc-sa/4.0/">
+        <div className="inline-block pt-1 pb-1">
-          <a className="transition hover:text-werefox-grey-darker dark:hover:text-werefox-grey-lighter">
+          <FButton
-            Creative Commons Attribution-NonCommercial-ShareAlike 4.0
+            url="https://creativecommons.org/licenses/by-nc-sa/4.0/"
-            International License
+            inner_text="Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License"
-          </a>
+            is_external="_blank"
-        </Link>
+          />
+        </div>
       </p>
     </footer>
   );

src/info/components/identity-button.js

@@ -16,7 +16,7 @@ export default function IdentityButton({
     <div className="animate-wiggle container max-w-sm mx-auto md:px-2 p-2">
       <Link href={`${url}${maybeLocator}`}>
         <a
-          className={`${extraClasses} block ring-2 ring-werefox-grey-darker 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`}
+          className={`${extraClasses} block text-lg text-center rounded-sm ring-2 ring-werefox-blue-dark dark:ring-werefox-blue hover:ring-werefox-pink-dark dark:hover:ring-werefox-pink text-werefox-blue-dark dark:text-werefox-blue hover:text-werefox-pink-dark dark:hover:text-werefox-pink hover:animate-yip transition`}
         >
           {images.map((source) => (
             <span

src/info/components/introduction-card.js

@@ -2,7 +2,10 @@ 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">
+        <p
+          key={info}
+          className="overflow-wrap w-full text-lg text-center text-werefox-blue-dark dark:text-werefox-blue"
+        >
           {introduction[info]}
         </p>
       ))}

src/info/components/page-button.js

@@ -3,10 +3,10 @@ import Image from "next/image";
 
 export default function PageButton({ title, images, url, extra_classes }) {
   return (
-    <div className="">
+    <div className="p-1">
       <Link href={url}>
         <a
-          className={`${extra_classes} sm:p-2 p-1 w-full inline-block ring-2 ring-werefox-grey-darker dark:ring-werefox-grey-light 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={`${extra_classes} p-2 w-full inline-block text-lg text-center rounded-sm ring-2 ring-werefox-blue-dark dark:ring-werefox-blue hover:ring-werefox-pink-dark dark:hover:ring-werefox-pink text-werefox-blue-dark dark:text-werefox-blue hover:text-werefox-pink-dark dark:hover:text-werefox-pink focus:text-werefox-pink-dark dark:focus:text-werefox-pink hover:animate-yip transition`}
         >
           {images.map((source) => (
             <span

src/info/components/server-card.js

@@ -1,6 +1,6 @@
 export default function ServerCard({ server, model, cpu, gpu, ram, os }) {
   return (
-    <div className="p-4 w-full inline-flow rounded-lg ring-2 ring-werefox-grey-darker dark:ring-werefox-grey-darker bg-werefox-grey-lightest dark:bg-werefox-grey text-lg text-werefox-grey-darker dark:text-werefox-grey-lightest">
+    <div className="p-2 space-y-1 w-full inline-flow ring-4 ring-werefox-blue-darkest dark:ring-werefox-blue bg-werefox-grey-lightest dark:bg-werefox-grey-darker text-lg text-werefox-blue-darkest dark:text-werefox-blue-light">
       <p>
         <code>{`System: ${server}`}</code>
       </p>

src/info/components/testimonial-card.js

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import Link from "next/link";
 
 export default function TestimonialCard({ src, alt, url, innerText, user }) {
@@ -15,20 +16,23 @@ export default function TestimonialCard({ src, alt, url, innerText, user }) {
   const testimonialdict = Object.assign({}, testimonialarray);
 
   return (
-    <div className="rounded-lg min-w-full flex overflow-hidden ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
+    <div className="min-w-full flex overflow-hidden ring-2 ring-werefox-pink-dark dark:ring-werefox-pink transition">
+      <div className="order-1 flex-1 flex-shrink-0 pt-4 pb-4 pl-4">
         <Link href={url}>
           <a>
-          <div className="flex-1 pt-4 pb-4 pl-4">
             {" "}
-            <img
+            <span className="relative inline-block rounded-lg sm:w-32 w-16 sm:h-32 h-16">
-              className="rounded-lg sm:w-32 w-16"
+              <Image
                 src={finalsrc}
+                layout="fill"
+                objectFit="contain"
                 alt={alt}
-            />{" "}
+              />
-          </div>
+            </span>{" "}
           </a>
-      </Link>{" "}
+        </Link>
-      <div className="flex flex-5 p-4 items-center justify-center min-h-full">
+      </div>
+      <div className="order-2 flex flex-5 p-4 items-center justify-center min-h-full">
         <div
           className={`animate-wiggle sm:text-lg text-xs text-center ${isMe}`}
         >

src/info/components/title-card.js

@@ -1,12 +1,17 @@
+import Image from "next/image";
+
 export default function TitleCard({ card_title }) {
   return (
-    <div className="rounded-lg ring-4 ring-werefox-blue bg-werefox-grey-light dark:bg-werefox-grey">
+    <div className="rounded-lg ring-4 ring-werefox-blue-dark dark:ring-werefox-blue bg-werefox-grey-light dark:bg-werefox-grey">
-      <p className="p-4 text-xl text-center text-werefox-blue-dark dark:text-werefox-blue">
+      <p className="p-4 w-full inline-block text-xl text-center text-werefox-blue-dark dark:text-werefox-blue">
-        <img
+        <span className="animate-bounce inline-block w-6 h-6 align-middle">
-          className="object-contain animate-bounce relative inline-block w-6 h-6 align-middle"
+          <Image
             src="/emoji/pixel_alexis.png"
+            layout="fill"
+            objectFit="contain"
             alt="Pixel Alexis!"
           />
+        </span>
         {"- "}
         {card_title}
       </p>

src/info/data/pages/faq.yml

@@ -54,7 +54,7 @@
   answer: >
     Hhaaa,,, Uhh, not at the moment? Anything can happen, though! Just don't
     make it your main goal to try and date me, yeah? 💙
-  src: "images/alexis_coffee.png"
+  src: "/images/alexis_coffee.png"
   alt: "Alexis sipping on some coffee"
 
 "... Wait, don't I know you?":
@@ -64,5 +64,5 @@
     person than the one you knew before. Regardless, if you feel like
     reaching out, in most cases I'm willing to catch up. If that's the case,
     your best bets are Twitter DM, e-mail, or a text if you still have my number.
-  src: "images/alexis_wink.png"
+  src: "/images/alexis_wink.png"
   alt: "Alexis winking and giving a peace sign"

src/info/data/pages/servers.yml

@@ -7,16 +7,16 @@
   ram: "16 Gb @2400Mhz"
   os: "Ubuntu Server 20.04"
 
-"Raspberry Pi 4 (x2)":
-  model: "B Rev 1.4"
-  cpu: "BCM2835 four-core @1.5Ghz"
-  gpu: "N/A"
-  ram: "8 Gb"
-  os: "Ubuntu Server 20.04"
-
 "ASUS MINIPC":
   model: "PB50 0601"
   cpu: "AMD Ryzen 5 3550H eight-core @2.1-3.7GHz"
   gpu: "AMD Radeon Vega 8 Graphics"
   ram: "32 Gb"
   os: "Ubuntu Server 20.10"
+
+"Raspberry Pi 4 (x2)":
+  model: "B Rev 1.4"
+  cpu: "BCM2835 four-core @1.5Ghz"
+  gpu: "N/A"
+  ram: "8 Gb"
+  os: "Ubuntu Server 20.04"

src/info/next.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  reactStrictMode: true,
+  images: {
+    domains: [
+      "cdn.yiff.life",
+      "assets.freedom.horse",
+      "s3-us-west-2.amazonaws.com",
+      "elekk.xyz",
+      "functional.cafe",
+      "dragon.style",
+      "masto.werefox.dev",
+      "hackers.town"
+    ],
+  },
+};

src/info/package.json

@@ -8,17 +8,17 @@
     "start": "next start -p 3444"
   },
   "dependencies": {
-    "autoprefixer": "^10.2.6",
+    "autoprefixer": "^10.3.7",
-    "axios": "^0.21.1",
+    "axios": "^0.21.4",
     "foo": "^1.0.0",
-    "glob-parent": "^6.0.0",
+    "glob-parent": "^6.0.2",
     "js-yaml": "^4.1.0",
     "next": "^10.2.3",
-    "npm": "^7.17.0",
+    "npm": "^7.24.2",
-    "postcss": "^8.3.2",
+    "postcss": "^8.3.9",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-iframe": "^1.8.0",
-    "tailwindcss": "^2.1.4"
+    "tailwindcss": "^2.2.16"
   }
 }

src/info/pages/testimonials/index.js

@@ -41,23 +41,26 @@ export const getStaticProps = async () => {
 };
 
 export default function Testimonials({ iconUrls, TESTIMONIALS }) {
-
   return (
     <BasicPage page_title="Werefox Testimonials" card_title="Testimonials!">
       <WCard
         innerText={`Sometimes, people say some nice things about me. Here are some
         examples!`}
       >
+        <div className="p-2 space-between-0">
           {Object.keys(TESTIMONIALS).map((user) => (
             <TCard
               key={TESTIMONIALS[user].url}
-            src={Boolean(iconUrls[user]) ? iconUrls[user] : `/images/${user}.png`}
+              src={
+                Boolean(iconUrls[user]) ? iconUrls[user] : `/images/${user}.png`
+              }
               alt={`${user}'s Avatar`}
               url={TESTIMONIALS[user].url}
               user={user}
               innerText={TESTIMONIALS[user].content}
             />
           ))}
+        </div>
       </WCard>
     </BasicPage>
   );

src/info/tailwind.config.js

@@ -42,16 +42,23 @@ module.exports = {
           "25%": { transform: "rotate(-10deg)" },
           "75%": { transform: "rotate(10deg)" },
         },
+        yip: {
+          "0%, 100%": { transform: "scale(1, 1)" },
+          "50%": { transform: "scale(1.01, 1.01)" },
+        },
       },
       animation: {
         wiggle: "wiggle 7s ease-in-out infinite",
         jiggle: "jiggle 5s cubic-bezier(0.75,0.25,0.25,0.75) infinite",
+        yip: "yip 0.1s ease-in-out",
       },
     },
   },
   variants: {
     extend: {
       brightness: ["hover", "dark"],
+      ringColor: ["hover", "dark", "active"],
+      animation: ["hover", "focus"],
     },
   },
   plugins: [],

start.sh

@@ -1,28 +0,0 @@
-#!/bin/bash
-
-set -xe
-
-MODE=$1
-x=$(sudo docker container ls | grep next-js | wc -l)
-if [ $x -eq 1 ]; then
-    sudo docker-compose rm -sf
-fi
-
-sudo MODE=$MODE docker-compose build
-
-if [ ! -d "./src/info" ]; then
-    sudo docker-compose run node npx create-next-app info
-    sudo docker-compose run node npx tailwindcss init -p
-    sudo chown -R $USER:$USER ./src
-fi
-
-if [ $MODE == "dev" ] || [ $MODE == "start" ]; then
-    sudo MODE=$MODE docker-compose up --build --force-recreate --remove-orphans -d
-    sudo docker-compose logs -f
-elif [ $MODE == "build" ]; then
-    sudo docker-compose run node bash -c "cd info && npm install"
-    sudo docker-compose run node bash -c "cd info && npm run build"
-else
-    echo "Please use 'dev', 'build', or 'start' as an argument."
-    exit 1
-fi