Updated deploy script, docker-compose, dockerfile, and many dependency updates.

This commit is contained in:
Ada Werefox 2022-12-06 01:51:43 +00:00
parent 0fe6cea68d
commit 82692c5bf2
18 changed files with 5466 additions and 2880 deletions

View File

@ -1,8 +1,8 @@
FROM node:12-alpine FROM node:alpine
RUN apk update && \ RUN apk update && \
apk add --no-cache bash apk add --no-cache bash
RUN npm install
WORKDIR /usr/src/app WORKDIR /usr/src/app
RUN npm install -g create-next-app

View File

@ -6,28 +6,28 @@ APP_FOLDER=info
CONTAINER_NAME=werefox-dev CONTAINER_NAME=werefox-dev
MODE=$1 MODE=$1
x=$(sudo docker container ls | grep next-js | wc -l) x=$(APP_FOLDER=$APP_FOLDER MODE=$MODE docker compose ps | grep $CONTAINER_NAME | wc -l)
if [ $x -eq 1 ]; then
sudo MODE=$MODE docker-compose rm -sf
fi
sudo MODE=$MODE docker-compose build if [ "$MODE" == "" ]; then
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." echo "Please use 'dev', 'build', or 'start' as an argument."
exit 1 exit 1
fi fi
if [ $x -eq 1 ]; then
APP_FOLDER=$APP_FOLDER MODE=$MODE docker compose rm -sf
fi
if [ ! -d "$(pwd)/src/$APP_FOLDER" ]; then
APP_FOLDER=$APP_FOLDER MODE=$MODE docker compose run $CONTAINER_NAME sh -c "npm install --silent create-next-app && \
npx create-next-app /usr/src/app/$APP_FOLDER --ts --eslint && \
cd $APP_FOLDER && npm install tailwindcss autoprefixer && npx tailwindcss init -p && \
cd /usr/src/app && rm -rf node_modules package.json package-lock.json"
fi
APP_FOLDER=$APP_FOLDER MODE=$MODE docker compose run $CONTAINER_NAME sh -c "cd $APP_FOLDER && npm install --silent"
APP_FOLDER=$APP_FOLDER MODE=$MODE docker compose run $CONTAINER_NAME sh -c "cd $APP_FOLDER && npx next telemetry disable"
APP_FOLDER=$APP_FOLDER MODE=$MODE docker compose up -d
if [ "$MODE" == "dev" ] || [ "$MODE" == "start" ]; then
APP_FOLDER=$APP_FOLDER MODE=$MODE docker compose logs -f
fi

View File

@ -3,11 +3,11 @@ version: "3"
services: services:
"werefox-dev": "werefox-dev":
image: next-js:latest image: node:alpine
container_name: werefox-dev
build: .
volumes: volumes:
- ./src:/usr/src/app/ - ./src:/usr/src/app/
ports: ports:
- "3444:3444" - "3444:3444"
command: bash -c "cd info && npm run $MODE" user: "1000:1000"
working_dir: "/usr/src/app"
command: 'sh -c "cd $APP_FOLDER && npm run $MODE"'

View File

@ -4,18 +4,16 @@ 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 (
<div> <div>
<Link href={url}> <Link href={url} target="_blank">
<a target="_blank"> <div className="p-2 md:text-lg sm:text-md text-xs text-center rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:animate-yip transition">
<div className="p-2 md:text-lg sm:text-md text-xs text-center rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:animate-yip transition"> <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
<span className="animate-bounce relative inline-block w-6 h-6 align-middle"> <Image src={src} layout="fill" objectFit="contain" alt={alt} />
<Image src={src} layout="fill" objectFit="contain" alt={alt} /> </span>{" "}
</span>{" "} {description}{" "}
{description}{" "} <div className="animate-wiggle inline-flex" target="_blank">
<div className="animate-wiggle inline-flex" target="_blank"> {url_text}
{url_text}
</div>
</div> </div>
</a> </div>
</Link> </Link>
</div> </div>
); );

View File

@ -12,24 +12,22 @@ export default function TestimonialCard({ question, answer, src, alt }) {
</p> </p>
</div> </div>
<div className=" ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:animate-yip transition"> <div className=" ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:animate-yip transition">
<Link href="https://yiff.life/@werefox"> <Link href="https://yiff.life/@werefox" target="_blank">
<a target="_blank"> <div className="p-2 flex">
<div className="p-2 flex"> <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">
<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"> <Image
<Image src={finalsrc}
src={finalsrc} layout="fill"
layout="fill" objectFit="contain"
objectFit="contain" alt={alt}
alt={alt} />
/>
</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">
{answer}
<br />
{"- @alice"}
</div>
</div> </div>
</a> <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">
{answer}
<br />
{"- @alice"}
</div>
</div>
</Link> </Link>
</div> </div>
</div> </div>

View File

@ -5,43 +5,37 @@ export default function footerButton({ theme, url, inner_text, is_external }) {
if (theme == "Ada") { if (theme == "Ada") {
return ( return (
<div className="flex-1 overflow-visible"> <div className="flex-1 overflow-visible">
<Link href={url}> <Link href={url} target={target}>
<a target={target}> <div className="ml-1 mr-1 rounded-sm ring-2 ring-ada-werefox-cyan-dark dark:ring-ada-werefox-cyan hover:ring-skye-werefox-blue-dark dark:hover:ring-skye-werefox-blue text-ada-werefox-cyan-darker dark:text-ada-werefox-cyan hover:text-skye-werefox-blue-dark dark:hover:text-skye-werefox-blue-light transition">
<div className="ml-1 mr-1 rounded-sm ring-2 ring-ada-werefox-cyan-dark dark:ring-ada-werefox-cyan hover:ring-skye-werefox-blue-dark dark:hover:ring-skye-werefox-blue text-ada-werefox-cyan-darker dark:text-ada-werefox-cyan hover:text-skye-werefox-blue-dark dark:hover:text-skye-werefox-blue-light transition"> <p className="pl-2 pr-2 text-center sm:text-md text-sm">
<p className="pl-2 pr-2 text-center sm:text-md text-sm"> {inner_text}
{inner_text} </p>
</p> </div>
</div>
</a>
</Link> </Link>
</div> </div>
); );
} }
if (theme == "Skye") { if (theme == "Skye") {
return ( return (
<div className="flex-1 overflow-visible"> <div className="flex-1 overflow-visible">
<Link href={url}> <Link href={url} target={target}>
<a target={target}> <div className="ml-1 mr-1 rounded-sm ring-2 ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink hover:ring-skye-werefox-blue-dark dark:hover:ring-skye-werefox-blue text-skye-werefox-pink-darker dark:text-skye-werefox-pink hover:text-skye-werefox-blue-dark dark:hover:text-skye-werefox-blue-light transition">
<div className="ml-1 mr-1 rounded-sm ring-2 ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink hover:ring-skye-werefox-blue-dark dark:hover:ring-skye-werefox-blue text-skye-werefox-pink-darker dark:text-skye-werefox-pink hover:text-skye-werefox-blue-dark dark:hover:text-skye-werefox-blue-light transition"> <p className="pl-2 pr-2 text-center sm:text-md text-sm">
<p className="pl-2 pr-2 text-center sm:text-md text-sm"> {inner_text}
{inner_text} </p>
</p> </div>
</div>
</a>
</Link> </Link>
</div> </div>
); );
} else { } else {
return ( return (
<div className="flex-1 overflow-visible"> <div className="flex-1 overflow-visible">
<Link href={url}> <Link href={url} target={target}>
<a target={target}> <div className="ml-1 mr-1 rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-darker dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light transition">
<div className="ml-1 mr-1 rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-darker dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light transition"> <p className="pl-2 pr-2 text-center sm:text-md text-sm">
<p className="pl-2 pr-2 text-center sm:text-md text-sm"> {inner_text}
{inner_text} </p>
</p> </div>
</div>
</a>
</Link> </Link>
</div> </div>
); );

View File

@ -14,30 +14,29 @@ export default function IdentityButton({
return ( return (
<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
<a href={`${url}${maybeLocator}`}
className={`${extraClasses} block text-lg text-center rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:animate-yip transition`} className={`${extraClasses} block text-lg text-center rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:animate-yip transition`}
> >
{images.map((source) => ( {images.map((source) => (
<span <span
key={source.src} key={source.src}
className="relative inline-block w-4 h-4 align-middle mb-1" className="relative inline-block w-4 h-4 align-middle mb-1"
> >
{" "} {" "}
<Image <Image
src={source.src} src={source.src}
layout="fill" layout="fill"
objectFit="contain" objectFit="contain"
alt={source.alt} alt={source.alt}
/>{" "} />{" "}
</span> </span>
))}{" "} ))}{" "}
{innerText == "Partners" {innerText == "Partners"
? partners > 0 ? partners > 0
? `Taken(${partners})` ? `Taken(${partners})`
: "Single" : "Single"
: innerText} : innerText}
</a>
</Link> </Link>
</div> </div>
); );

View File

@ -3,12 +3,10 @@ import Link from "next/link";
export default function IdentityCardButton({ url, button_text }) { export default function IdentityCardButton({ url, button_text }) {
return ( return (
<div> <div>
<Link href={url}> <Link href={url} target="_blank">
<a target="_blank"> <div className="p-4 hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue hover:animate-yip transition">
<div className="p-4 hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue hover:animate-yip transition"> {button_text}
{button_text} </div>
</div>
</a>
</Link> </Link>
</div> </div>
); );

View File

@ -13,8 +13,7 @@ export default function PageButton({
if (Boolean(new_tab)) { if (Boolean(new_tab)) {
return ( return (
<div> <div>
<Link href={url}> <Link href={url}
<a
className={`${extra_classes} p-2 w-full inline-block text-lg text-center rounded-sm ring-2 bg-skye-werefox-grey-lightest dark:bg-skye-werefox-grey-dark ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink hover:ring-skye-werefox-blue-dark dark:hover:ring-skye-werefox-blue text-skye-werefox-pink-dark dark:text-skye-werefox-pink hover:text-skye-werefox-blue-dark dark:hover:text-skye-werefox-blue-light focus:text-skye-werefox-blue-dark dark:focus:text-skye-werefox-blue-light hover:animate-yip transition`} className={`${extra_classes} p-2 w-full inline-block text-lg text-center rounded-sm ring-2 bg-skye-werefox-grey-lightest dark:bg-skye-werefox-grey-dark ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink hover:ring-skye-werefox-blue-dark dark:hover:ring-skye-werefox-blue text-skye-werefox-pink-dark dark:text-skye-werefox-pink hover:text-skye-werefox-blue-dark dark:hover:text-skye-werefox-blue-light focus:text-skye-werefox-blue-dark dark:focus:text-skye-werefox-blue-light hover:animate-yip transition`}
target="_blank" target="_blank"
> >
@ -32,15 +31,13 @@ export default function PageButton({
</span> </span>
))} ))}
{` ${title}`} {` ${title}`}
</a>
</Link> </Link>
</div> </div>
); );
} else { } else {
return ( return (
<div> <div>
<Link href={url}> <Link href={url}
<a
className={`${extra_classes} p-2 w-full inline-block text-lg text-center rounded-sm ring-2 bg-skye-werefox-grey-lightest dark:bg-skye-werefox-grey-dark ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink hover:ring-skye-werefox-blue-dark dark:hover:ring-skye-werefox-blue text-skye-werefox-pink-dark dark:text-skye-werefox-pink hover:text-skye-werefox-blue-dark dark:hover:text-skye-werefox-blue-light focus:text-skye-werefox-blue-dark dark:focus:text-skye-werefox-blue-light hover:animate-yip transition`} className={`${extra_classes} p-2 w-full inline-block text-lg text-center rounded-sm ring-2 bg-skye-werefox-grey-lightest dark:bg-skye-werefox-grey-dark ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink hover:ring-skye-werefox-blue-dark dark:hover:ring-skye-werefox-blue text-skye-werefox-pink-dark dark:text-skye-werefox-pink hover:text-skye-werefox-blue-dark dark:hover:text-skye-werefox-blue-light focus:text-skye-werefox-blue-dark dark:focus:text-skye-werefox-blue-light hover:animate-yip transition`}
> >
{images.map((source) => ( {images.map((source) => (
@ -57,7 +54,6 @@ export default function PageButton({
</span> </span>
))} ))}
{` ${title}`} {` ${title}`}
</a>
</Link> </Link>
</div> </div>
); );
@ -66,8 +62,7 @@ export default function PageButton({
if (Boolean(new_tab)) { if (Boolean(new_tab)) {
return ( return (
<div> <div>
<Link href={url}> <Link href={url}
<a
className={`${extra_classes} p-2 w-full inline-block text-lg text-center rounded-sm ring-2 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light focus:text-alice-werefox-blue-dark dark:focus:text-alice-werefox-blue-light hover:animate-yip transition`} className={`${extra_classes} p-2 w-full inline-block text-lg text-center rounded-sm ring-2 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light focus:text-alice-werefox-blue-dark dark:focus:text-alice-werefox-blue-light hover:animate-yip transition`}
target="_blank" target="_blank"
> >
@ -85,15 +80,13 @@ export default function PageButton({
</span> </span>
))} ))}
{` ${title}`} {` ${title}`}
</a>
</Link> </Link>
</div> </div>
); );
} else { } else {
return ( return (
<div> <div>
<Link href={url}> <Link href={url}
<a
className={`${extra_classes} p-2 w-full inline-block text-lg text-center rounded-sm ring-2 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light focus:text-alice-werefox-blue-dark dark:focus:text-alice-werefox-blue-light hover:animate-yip transition`} className={`${extra_classes} p-2 w-full inline-block text-lg text-center rounded-sm ring-2 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light focus:text-alice-werefox-blue-dark dark:focus:text-alice-werefox-blue-light hover:animate-yip transition`}
> >
{images.map((source) => ( {images.map((source) => (
@ -110,7 +103,6 @@ export default function PageButton({
</span> </span>
))} ))}
{` ${title}`} {` ${title}`}
</a>
</Link> </Link>
</div> </div>
); );

View File

@ -47,12 +47,10 @@ export function formatCustomEmoji(str, emoji_paths) {
export function renderPossibleURLField(field, emoji_paths) { export function renderPossibleURLField(field, emoji_paths) {
if (validURL(field)) { if (validURL(field)) {
return ( return (
<Link href={field}> <Link href={field} target="_blank">
<a target="_blank"> <div className="p-2 flex min-w-full min-h-full justify-center items-center align-middle ring-2 rounded-sm ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:animate-yip transition">
<div className="p-2 flex min-w-full min-h-full justify-center items-center align-middle ring-2 rounded-sm ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:animate-yip transition"> {field}
{field} </div>
</div>
</a>
</Link> </Link>
); );
} else { } else {
@ -113,25 +111,18 @@ export default function PartnerCard({
return ( return (
<div className="p-4 flex-column space-y-4 sm:break-normal break-all sm:text-sm text-xs text-center rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red"> <div className="p-4 flex-column space-y-4 sm:break-normal break-all sm:text-sm text-xs text-center rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red">
<Link href={url}> <Link href={url} target="_blank">
<a target="_blank"> <div className="p-4 flex group rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:animate-yip transition">
<div className="p-4 flex group rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:animate-yip transition"> <div className="order-1 flex-1 flex-shrink-0 relative items-center justify-center align-middle sm:w-32 w-16 min-h-full mr-4">
<div className="order-1 flex-1 flex-shrink-0 relative items-center justify-center align-middle sm:w-32 w-16 min-h-full mr-4"> <Image src={finalsrc} layout="fill" objectFit="contain" alt={alt} />
<Image </div>
src={finalsrc} <div className="order-2 flex-5 space-y-4">
layout="fill" <div className="p-2 rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red group-hover:ring-alice-werefox-blue-dark dark:group-hover:ring-alice-werefox-blue">
objectFit="contain" {renderPossibleBio(bio, emoji_paths)}
alt={alt} {`- @${user}`}
/>
</div>
<div className="order-2 flex-5 space-y-4">
<div className="p-2 rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red group-hover:ring-alice-werefox-blue-dark dark:group-hover:ring-alice-werefox-blue">
{renderPossibleBio(bio, emoji_paths)}
{`- @${user}`}
</div>
</div> </div>
</div> </div>
</a> </div>
</Link> </Link>
<div className="flex-column space-y-4 break-all text-alice-werefox-red-dark dark:text-alice-werefox-red-light"> <div className="flex-column space-y-4 break-all text-alice-werefox-red-dark dark:text-alice-werefox-red-light">
{renderPossibleFields(fields, emoji_paths)} {renderPossibleFields(fields, emoji_paths)}

View File

@ -12,23 +12,16 @@ export default function projectCard({
if (Boolean(new_tab)) { if (Boolean(new_tab)) {
return ( return (
<div> <div>
<Link href={url}> <Link href={url} target="_blank">
<a target="_blank"> <li className="p-4 space-y-2 rounded-sm ring-2 text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue hover:animate-yip transition">
<li className="p-4 space-y-2 rounded-sm ring-2 text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue hover:animate-yip transition"> <div className="text-lg text-center">
<div className="text-lg text-center"> <span className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top">
<span className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top"> <Image src={src} layout="fill" objectFit="contain" alt={alt} />
<Image </span>
src={src} {` ${title}`}
layout="fill" </div>
objectFit="contain" <div className="text-md text-center">{description}</div>
alt={alt} </li>
/>
</span>
{` ${title}`}
</div>
<div className="text-md text-center">{description}</div>
</li>
</a>
</Link> </Link>
</div> </div>
); );
@ -36,22 +29,15 @@ export default function projectCard({
return ( return (
<div> <div>
<Link href={url}> <Link href={url}>
<a> <li className="p-4 space-y-2 rounded-sm ring-2 text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue hover:animate-yip transition">
<li className="p-4 space-y-2 rounded-sm ring-2 text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue hover:animate-yip transition"> <div className="text-lg text-center">
<div className="text-lg text-center"> <span className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top">
<span className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top"> <Image src={src} layout="fill" objectFit="contain" alt={alt} />
<Image </span>
src={src} {` ${title}`}
layout="fill" </div>
objectFit="contain" <div className="text-md text-center">{description}</div>
alt={alt} </li>
/>
</span>
{` ${title}`}
</div>
<div className="text-md text-center">{description}</div>
</li>
</a>
</Link> </Link>
</div> </div>
); );

View File

@ -1,5 +1,4 @@
import SCard from "./server-card"; import SCard from "./server-card";
import Link from "next/link";
export default function ServerBlock({ servers }) { export default function ServerBlock({ servers }) {
return ( return (

View File

@ -9,32 +9,30 @@ export default function TestimonialCard({ src, alt, url, innerText, user }) {
return ( return (
<div className="rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:animate-yip transition"> <div className="rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:animate-yip transition">
<Link href={url}> <Link href={url} target="_blank">
<a target="_blank"> <div className="min-w-full flex overflow-hidden">
<div className="min-w-full flex overflow-hidden"> <div className="order-1 flex-1 flex-shrink-0 pt-4 pb-4 pl-4">
<div className="order-1 flex-1 flex-shrink-0 pt-4 pb-4 pl-4"> <span className="relative inline-block sm:w-32 w-16 sm:h-32 h-16">
<span className="relative inline-block sm:w-32 w-16 sm:h-32 h-16"> <Image
<Image className="rounded-sm"
className="rounded-sm" src={finalsrc}
src={finalsrc} layout="fill"
layout="fill" objectFit="contain"
objectFit="contain" alt={alt}
alt={alt} />
/> </span>
</span> </div>
</div> <div className="order-2 flex flex-5 p-4 items-center justify-center min-h-full">
<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">
<div className="animate-wiggle sm:text-lg text-xs text-center"> {Object.keys(testimonialdict).map((t) => (
{Object.keys(testimonialdict).map((t) => ( <p className="overflow-auto" key={t}>
<p className="overflow-auto" key={t}> {testimonialdict[t] == "" ? <br /> : testimonialdict[t]}
{testimonialdict[t] == "" ? <br /> : testimonialdict[t]} </p>
</p> ))}
))} {`- @${user}`}
{`- @${user}`}
</div>
</div> </div>
</div> </div>
</a> </div>
</Link> </Link>
</div> </div>
); );

View File

@ -1,4 +1,3 @@
import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
export default function TitleCard({ theme, card_title }) { export default function TitleCard({ theme, card_title }) {

File diff suppressed because it is too large Load Diff

View File

@ -13,11 +13,11 @@
"foo": "^1.0.0", "foo": "^1.0.0",
"glob-parent": "^6.0.2", "glob-parent": "^6.0.2",
"js-yaml": "^4.1.0", "js-yaml": "^4.1.0",
"next": "^10.2.3", "next": "^13.0.6",
"npm": "^7.24.2", "npm": "^9.1.3",
"postcss": "^8.3.9", "postcss": "^8.3.9",
"react": "17.0.2", "react": "^18.2.0",
"react-dom": "17.0.2", "react-dom": "^18.2.0",
"react-iframe": "^1.8.0", "react-iframe": "^1.8.0",
"tailwindcss": "^2.2.16" "tailwindcss": "^2.2.16"
} }

View File

@ -38,19 +38,17 @@ export default function Fursona({ FURSONA }) {
> >
<IDCardText info={FURSONA[fursona].info} /> <IDCardText info={FURSONA[fursona].info} />
<div className="rounded-lg hover:animate-yip transition"> <div className="rounded-lg hover:animate-yip transition">
<Link href="https://plush.city/@Logan"> <Link href="https://plush.city/@Logan" target="_blank">
<a target="_blank"> <span className="relative inline-flex align-middle">
<span className="relative inline-flex align-middle"> <Image
<Image className="rounded-lg"
className="rounded-lg" src={FURSONA[fursona].src2}
src={FURSONA[fursona].src2} layout="intrinsic"
layout="intrinsic" width="2048"
width="2048" height="2048"
height="2048" alt={FURSONA[fursona].alt2}
alt={FURSONA[fursona].alt2} />
/> </span>
</span>
</a>
</Link> </Link>
</div> </div>
</IDCard> </IDCard>

View File

@ -38,19 +38,17 @@ export default function Fursona({ FURSONA }) {
> >
<IDCardText info={FURSONA[fursona].info} /> <IDCardText info={FURSONA[fursona].info} />
<div className="rounded-lg hover:animate-yip transition"> <div className="rounded-lg hover:animate-yip transition">
<Link href="https://twitter.com/ribbonfemale"> <Link href="https://twitter.com/ribbonfemale" target="_blank">
<a target="_blank"> <span className="relative inline-flex align-middle">
<span className="relative inline-flex align-middle"> <Image
<Image className="rounded-lg"
className="rounded-lg" src={FURSONA[fursona].src2}
src={FURSONA[fursona].src2} layout="intrinsic"
layout="intrinsic" width="2048"
width="2048" height="2048"
height="2048" alt={FURSONA[fursona].alt2}
alt={FURSONA[fursona].alt2} />
/> </span>
</span>
</a>
</Link> </Link>
</div> </div>
</IDCard> </IDCard>