ada/werefox-cafe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 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 }) {
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
View file

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

@ -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 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 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
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">
<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
View file

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

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

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

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

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

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

@ -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 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"
},
"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
View file

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

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