ada/werefox-cafe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Cleaning up code and optomizing. Lots of theme changes.

Browse Source
This commit is contained in:
Alexis Werefox 2021-10-07 04:04:38 +00:00
parent d24c98f541
commit 08b26558e0
21 changed files with 755 additions and 479 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
deploy.sh Executable file
View File

@ -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 vendored Normal file
View File

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

10
src/info/components/contacts-link.js
View File

@ -1,12 +1,12 @@
import Image from "next/image";
export default function ContactsLink({ src, alt, url, description, url_text }) { export default function ContactsLink({ src, alt, url, description, url_text }) {
return ( return (
<p className="md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue"> <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"> <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>{" "} </a>{" "}
{description}{" "} {description}{" "}
<a <a

4
src/info/components/faq-block.js
View File

@ -2,7 +2,7 @@ import FCard from "./faq-card";
export default function FAQBlock({ faqs }) { export default function FAQBlock({ faqs }) {
return ( 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) => ( {Object.keys(faqs).map((faq) => (
<FCard <FCard
key={faq} key={faq}
@ -12,6 +12,6 @@ export default function FAQBlock({ faqs }) {
alt={faqs[faq].alt} alt={faqs[faq].alt}
/> />
))} ))}
</> </div>
); );
} }

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

@ -1,41 +1,41 @@
import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
export default function TestimonialCard({ question, answer, src, alt }) { export default function TestimonialCard({ question, answer, src, alt }) {
const finalsrc = Boolean(src) ? src : "/images/logo.png"; const finalsrc = Boolean(src) ? src : "/images/logo.png";
return ( 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">
<p className="p-8 text-center text-lg sm:text-xl text-werefox-pink-dark dark:text-werefox-pink"> {question}
{question} </p>
</p> </div>
</div> <div className="p-2 flex ring-2 ring-werefox-blue-dark dark:ring-werefox-blue">
<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="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"> <Link href="https://vulpine.club/@shadow8t4">
<a> <a>
<div className="flex-1 pt-4 pb-4 pl-4"> <Image
<img
className="rounded-lg sm:w-32 w-16"
src={finalsrc} src={finalsrc}
layout="fill"
objectFit="contain"
alt={alt} alt={alt}
/> />
</div>
</a> </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>
<p> <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">
{answer} <p>
<br /> {answer}
{"- "} <br />
<Link href="https://vulpine.club/@shadow8t4"> {"- "}
<a <Link href="https://vulpine.club/@shadow8t4">
target="_blank" <a
className="transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink" target="_blank"
>{`@shadow8t4`}</a> className="transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
</Link> >{`@shadow8t4`}</a>
</p> </Link>
</div> </p>
</div> </div>
</div> </div>
</div> </div>

19
src/info/components/footer-button.js Normal file
View File

@ -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
View File

@ -1,46 +1,34 @@
import Link from "next/link"; import FButton from "./footer-button";
import WCard from "./werefox-card";
export default function FooterCard() { export default function FooterCard() {
return ( 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"> <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 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> </div>
<p className="text-center text-xs text-werefox-grey-darkest dark:text-werefox-grey-lightest"> <p className="text-center text-xs text-werefox-grey-darkest dark:text-werefox-grey-lightest">
This site uses{" "} 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{" "} , 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> </p>
</footer> </footer>
); );

2
src/info/components/identity-button.js
View File

@ -16,7 +16,7 @@ export default function IdentityButton({
<div className="animate-wiggle container max-w-sm mx-auto md:px-2 p-2"> <div className="animate-wiggle container max-w-sm mx-auto md:px-2 p-2">
<Link href={`${url}${maybeLocator}`}> <Link href={`${url}${maybeLocator}`}>
<a <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) => ( {images.map((source) => (
<span <span

5
src/info/components/introduction-card.js
View File

@ -2,7 +2,10 @@ export default function introductionCard({ introduction }) {
return ( return (
<div className="items-center justify-center space-y-4 p-8"> <div className="items-center justify-center space-y-4 p-8">
{Object.keys(introduction).map((info) => ( {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]} {introduction[info]}
</p> </p>
))} ))}

4
src/info/components/page-button.js
View File

@ -3,10 +3,10 @@ import Image from "next/image";
export default function PageButton({ title, images, url, extra_classes }) { export default function PageButton({ title, images, url, extra_classes }) {
return ( return (
<div className=""> <div className="p-1">
<Link href={url}> <Link href={url}>
<a <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) => ( {images.map((source) => (
<span <span

2
src/info/components/server-card.js
View File

@ -1,6 +1,6 @@
export default function ServerCard({ server, model, cpu, gpu, ram, os }) { export default function ServerCard({ server, model, cpu, gpu, ram, os }) {
return ( 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> <p>
<code>{`System: ${server}`}</code> <code>{`System: ${server}`}</code>
</p> </p>

30
src/info/components/testimonial-card.js
View File

@ -1,3 +1,4 @@
import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
export default function TestimonialCard({ src, alt, url, innerText, user }) { 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); const testimonialdict = Object.assign({}, testimonialarray);
return ( 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">
<Link href={url}> <div className="order-1 flex-1 flex-shrink-0 pt-4 pb-4 pl-4">
<a> <Link href={url}>
<div className="flex-1 pt-4 pb-4 pl-4"> <a>
{" "} {" "}
<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} src={finalsrc}
alt={alt} layout="fill"
/>{" "} objectFit="contain"
</div> alt={alt}
</a> />
</Link>{" "} </span>{" "}
<div className="flex flex-5 p-4 items-center justify-center min-h-full"> </a>
</Link>
</div>
<div className="order-2 flex flex-5 p-4 items-center justify-center min-h-full">
<div <div
className={`animate-wiggle sm:text-lg text-xs text-center ${isMe}`} className={`animate-wiggle sm:text-lg text-xs text-center ${isMe}`}
> >

19
src/info/components/title-card.js
View File

@ -1,12 +1,17 @@
import Image from "next/image";
export default function TitleCard({ card_title }) { export default function TitleCard({ card_title }) {
return ( 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" src="/emoji/pixel_alexis.png"
alt="Pixel Alexis!" layout="fill"
/> objectFit="contain"
alt="Pixel Alexis!"
/>
</span>
{"- "} {"- "}
{card_title} {card_title}
</p> </p>

4
src/info/data/pages/faq.yml
View File

@ -54,7 +54,7 @@
answer: > answer: >
Hhaaa,,, Uhh, not at the moment? Anything can happen, though! Just don't Hhaaa,,, Uhh, not at the moment? Anything can happen, though! Just don't
make it your main goal to try and date me, yeah? 💙 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" alt: "Alexis sipping on some coffee"
"... Wait, don't I know you?": "... Wait, don't I know you?":
@ -64,5 +64,5 @@
person than the one you knew before. Regardless, if you feel like 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, 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. 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" alt: "Alexis winking and giving a peace sign"

14
src/info/data/pages/servers.yml
View File

@ -7,16 +7,16 @@
ram: "16 Gb @2400Mhz" ram: "16 Gb @2400Mhz"
os: "Ubuntu Server 20.04" 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": "ASUS MINIPC":
model: "PB50 0601" model: "PB50 0601"
cpu: "AMD Ryzen 5 3550H eight-core @2.1-3.7GHz" cpu: "AMD Ryzen 5 3550H eight-core @2.1-3.7GHz"
gpu: "AMD Radeon Vega 8 Graphics" gpu: "AMD Radeon Vega 8 Graphics"
ram: "32 Gb" ram: "32 Gb"
os: "Ubuntu Server 20.10" 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 Normal file
View File

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

885
src/info/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

12
src/info/package.json
View File

@ -8,17 +8,17 @@
"start": "next start -p 3444" "start": "next start -p 3444"
}, },
"dependencies": { "dependencies": {
"autoprefixer": "^10.2.6", "autoprefixer": "^10.3.7",
"axios": "^0.21.1", "axios": "^0.21.4",
"foo": "^1.0.0", "foo": "^1.0.0",
"glob-parent": "^6.0.0", "glob-parent": "^6.0.2",
"js-yaml": "^4.1.0", "js-yaml": "^4.1.0",
"next": "^10.2.3", "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": "17.0.2",
"react-dom": "17.0.2", "react-dom": "17.0.2",
"react-iframe": "^1.8.0", "react-iframe": "^1.8.0",
"tailwindcss": "^2.1.4" "tailwindcss": "^2.2.16"
} }
} }

25
src/info/pages/testimonials/index.js
View File

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

7
src/info/tailwind.config.js
View File

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

28
start.sh
View File

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