Browse Source

Cleaning up code and optomizing. Lots of theme changes.

main
Alexis Werefox 2 weeks ago
parent
commit
08b26558e0
  1. 33
      deploy.sh
  2. 6
      src/info/cache/config.json
  3. 10
      src/info/components/contacts-link.js
  4. 4
      src/info/components/faq-block.js
  5. 52
      src/info/components/faq-card.js
  6. 19
      src/info/components/footer-button.js
  7. 58
      src/info/components/footer-card.js
  8. 2
      src/info/components/identity-button.js
  9. 5
      src/info/components/introduction-card.js
  10. 4
      src/info/components/page-button.js
  11. 2
      src/info/components/server-card.js
  12. 30
      src/info/components/testimonial-card.js
  13. 19
      src/info/components/title-card.js
  14. 4
      src/info/data/pages/faq.yml
  15. 14
      src/info/data/pages/servers.yml
  16. 15
      src/info/next.config.js
  17. 883
      src/info/package-lock.json
  18. 12
      src/info/package.json
  19. 25
      src/info/pages/testimonials/index.js
  20. 7
      src/info/tailwind.config.js
  21. 28
      start.sh

33
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

6
src/info/cache/config.json

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

10
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
className="object-contain animate-bounce relative inline-block w-6 h-6 align-middle"
src={src}
alt={alt}
/>
<span className="object-contain animate-bounce relative inline-block w-6 h-6 align-middle">
<Image src={src} layout="fill" objectFit="contain" alt={alt} />
</span>
</a>{" "}
{description}{" "}
<a

4
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>
);
}

52
src/info/components/faq-card.js

@ -1,41 +1,41 @@
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="p-2 space-y-2">
<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="space-y-1">
<div className="ring-2 ring-werefox-pink-dark dark:ring-werefox-pink">
<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 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">
<img
className="rounded-lg sm:w-32 w-16"
<Image
src={finalsrc}
layout="fill"
objectFit="contain"
alt={alt}
/>
</div>
</a>
</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">
<p>
{answer}
<br />
{"- "}
<Link href="https://vulpine.club/@shadow8t4">
<a
target="_blank"
className="transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
>{`@shadow8t4`}</a>
</Link>
</p>
</div>
</Link>
</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 />
{"- "}
<Link href="https://vulpine.club/@shadow8t4">
<a
target="_blank"
className="transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
>{`@shadow8t4`}</a>
</Link>
</p>
</div>
</div>
</div>

19
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>
);
}

58
src/info/components/footer-card.js

@ -1,46 +1,34 @@
import Link from "next/link";
import WCard from "./werefox-card";
import FButton from "./footer-button";
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">
<p className="text-right sm:text-md text-sm transition">
<Link href="/contacts">
<a className="hover:text-werefox-pink-dark dark:hover:text-werefox-pink">
Contact
</a>
</Link>
</p>
</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 className="flex-1"></div>
<FButton url="/contacts" inner_text="Contact" />
<FButton
url="https://gitea.werefox.dev/shadow8t4/info-werefox-dev"
inner_text=" /src"
is_external="_blank"
/>
<div className="flex-1"></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">
<a className="transition hover:text-werefox-grey-darker dark:hover:text-werefox-grey-lighter">
Mutant Standard emoji
</a>
</Link>
<div className="inline-block pt-1 pb-1">
<FButton
url="https://mutant.tech"
inner_text="Mutant Standard emoji"
is_external="_blank"
/>
</div>
, which are licensed under a{" "}
<Link href="https://creativecommons.org/licenses/by-nc-sa/4.0/">
<a className="transition hover:text-werefox-grey-darker dark:hover:text-werefox-grey-lighter">
Creative Commons Attribution-NonCommercial-ShareAlike 4.0
International License
</a>
</Link>
<div className="inline-block pt-1 pb-1">
<FButton
url="https://creativecommons.org/licenses/by-nc-sa/4.0/"
inner_text="Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License"
is_external="_blank"
/>
</div>
</p>
</footer>
);

2
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

5
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>
))}

4
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

2
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>

30
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">
<Link href={url}>
<a>
<div className="flex-1 pt-4 pb-4 pl-4">
<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>
{" "}
<img
className="rounded-lg sm:w-32 w-16"
src={finalsrc}
alt={alt}
/>{" "}
</div>
</a>
</Link>{" "}
<div className="flex flex-5 p-4 items-center justify-center min-h-full">
<span className="relative inline-block rounded-lg sm:w-32 w-16 sm:h-32 h-16">
<Image
src={finalsrc}
layout="fill"
objectFit="contain"
alt={alt}
/>
</span>{" "}
</a>
</Link>
</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}`}
>

19
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">
<p className="p-4 text-xl text-center text-werefox-blue-dark dark:text-werefox-blue">
<img
className="object-contain animate-bounce relative inline-block w-6 h-6 align-middle"
src="/emoji/pixel_alexis.png"
alt="Pixel Alexis!"
/>
<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 w-full inline-block text-xl text-center text-werefox-blue-dark dark:text-werefox-blue">
<span className="animate-bounce 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>

4
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"

14
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"

15
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"
],
},
};

883
src/info/package-lock.json

File diff suppressed because it is too large

12
src/info/package.json

@ -8,17 +8,17 @@
"start": "next start -p 3444"
},
"dependencies": {
"autoprefixer": "^10.2.6",
"axios": "^0.21.1",
"autoprefixer": "^10.3.7",
"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",
"postcss": "^8.3.2",
"npm": "^7.24.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"
}
}

25
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!`}
>
{Object.keys(TESTIMONIALS).map((user) => (
<TCard
key={TESTIMONIALS[user].url}
src={Boolean(iconUrls[user]) ? iconUrls[user] : `/images/${user}.png`}
alt={`${user}'s Avatar`}
url={TESTIMONIALS[user].url}
user={user}
innerText={TESTIMONIALS[user].content}
/>
))}
<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`
}
alt={`${user}'s Avatar`}
url={TESTIMONIALS[user].url}
user={user}
innerText={TESTIMONIALS[user].content}
/>
))}
</div>
</WCard>
</BasicPage>
);

7
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: [],

28
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