I finished the testimonials page oh my god
This commit is contained in:
Alexis Werefox
parent
d88a45b7f8
commit
6d5175cb45
@ -4,6 +4,7 @@ RUN apk update && \
|
||||
apk add --no-cache bash
|
||||
|
||||
RUN npm install --save next && \
|
||||
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
|
||||
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest && \
|
||||
npm install --save axios
|
||||
|
||||
WORKDIR /usr/src/app
|
||||
|
||||
@ -14,7 +14,7 @@ export default function IdentityButton({
|
||||
<Link href={url}>
|
||||
<a
|
||||
target="_blank"
|
||||
className={`${extraClasses} block 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 ring-2 ring-werefox-grey-lightest 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`}
|
||||
>
|
||||
{images.map((source) => (
|
||||
<span
|
||||
24
src/info/components/mutant-standard.js
Normal file
24
src/info/components/mutant-standard.js
Normal file
@ -0,0 +1,24 @@
|
||||
import Link from "next/link";
|
||||
import WCard from "./werefox-card"
|
||||
|
||||
export default function MutantStandard() {
|
||||
return (
|
||||
<WCard>
|
||||
<footer className="p-4">
|
||||
<p className="text-center text-xs text-werefox-grey-darker dark:text-werefox-grey-lighter">
|
||||
This site uses{" "}
|
||||
<Link href="https://mutant.tech">
|
||||
<a>Mutant Standard emoji</a>
|
||||
</Link>
|
||||
, which are licensed under a{" "}
|
||||
<Link href="https://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
<a>
|
||||
Creative Commons Attribution-NonCommercial-ShareAlike 4.0
|
||||
International License
|
||||
</a>
|
||||
</Link>
|
||||
</p>
|
||||
</footer>
|
||||
</WCard>
|
||||
);
|
||||
}
|
||||
33
src/info/components/testimonial-card.js
Normal file
33
src/info/components/testimonial-card.js
Normal file
@ -0,0 +1,33 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function TestimonialCard({ src, alt, url, innerText, user }) {
|
||||
const finalsrc = Boolean(src) ? src : "/images/werefox_logo.png";
|
||||
|
||||
return (
|
||||
<div className="rounded-lg container flex overflow-hidden ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
|
||||
<Link href={url}>
|
||||
<a>
|
||||
<div className="flex-1">
|
||||
{" "}
|
||||
<img
|
||||
className="rounded-lg sm:w-32 w-16"
|
||||
src={finalsrc}
|
||||
alt={alt}
|
||||
/>{" "}
|
||||
</div>
|
||||
</a>
|
||||
</Link>{" "}
|
||||
<div className="animate-wiggle flex-5 p-4 sm:text-lg text-xs text-center text-werefox-pink-dark dark:text-werefox-pink">
|
||||
<p>
|
||||
{innerText}
|
||||
<br />
|
||||
{"- "}
|
||||
<Link href={url}>
|
||||
<a target="_blank">{`@${user}`}</a>
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
52
src/info/components/werefox-card.js
Normal file
52
src/info/components/werefox-card.js
Normal file
@ -0,0 +1,52 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function WerefoxCard({
|
||||
isTitle,
|
||||
isCardButton,
|
||||
extraClasses,
|
||||
imageObj,
|
||||
innerText,
|
||||
url,
|
||||
children,
|
||||
}) {
|
||||
const images = Array(imageObj).flat();
|
||||
if (isTitle) {
|
||||
return (
|
||||
<div className="rounded-lg container ring-4 ring-werefox-blue bg-werefox-grey-light dark:bg-werefox-grey">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
} else if (isCardButton) {
|
||||
return (
|
||||
<div className="container">
|
||||
<Link href={url}>
|
||||
<a
|
||||
className={`${extraClasses} block ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker rounded-lg p-4 text-xl text-center text-werefox-grey dark:text-werefox-grey-dark bg-werefox-grey-lighter dark:bg-werefox-grey-lightest transition hover:bg-werefox-grey-lightest dark:hover:bg-werefox-grey-light`}
|
||||
>
|
||||
{images.map((source) => (
|
||||
<span
|
||||
key={source.src}
|
||||
className="relative inline-block w-8 h-8 align-middle mb-1"
|
||||
>
|
||||
{" "}
|
||||
<Image
|
||||
src={source.src}
|
||||
layout="fill"
|
||||
objectFit="contain"
|
||||
alt={source.alt}
|
||||
/>{" "}
|
||||
</span>
|
||||
))}{" "}
|
||||
{innerText}
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="rounded-lg container ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
|
||||
|
||||
export default (req, res) => {
|
||||
res.status(200).json({ name: 'John Doe' })
|
||||
res.status(200).json({ name: 'Alexis Werefox' })
|
||||
}
|
||||
|
||||
43
src/info/pages/hrt/index.js
Normal file
43
src/info/pages/hrt/index.js
Normal file
@ -0,0 +1,43 @@
|
||||
import Head from "next/head";
|
||||
import WCard from "../../components/werefox-card";
|
||||
import MS from "../../components/mutant-standard";
|
||||
|
||||
export default function HRT() {
|
||||
return (
|
||||
<div className="min-h-screen bg-werefox-grey-lighter dark:bg-werefox-grey-dark font-nerd">
|
||||
<Head>
|
||||
<title>Alexis Werefox HRT Tracker</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<div className="container space-y-4 mx-auto px-4 py-4">
|
||||
<WCard
|
||||
isCardButton="true"
|
||||
extraClasses=""
|
||||
imageObj={[
|
||||
{ src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" },
|
||||
{ src: "/emoji/blue_heart.svg", alt: "Blue heart" },
|
||||
]}
|
||||
innerText="Take me back home!"
|
||||
url="/"
|
||||
/>
|
||||
<WCard>
|
||||
<p className="p-6 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
|
||||
Oh no I haven't actually finished this page but I started on<br/>
|
||||
December 11th, 2020
|
||||
</p>
|
||||
</WCard>
|
||||
<WCard
|
||||
isCardButton="true"
|
||||
extraClasses=""
|
||||
imageObj={[
|
||||
{ src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" },
|
||||
{ src: "/emoji/blue_heart.svg", alt: "Blue heart" },
|
||||
]}
|
||||
innerText="Take me back home!"
|
||||
url="/"
|
||||
/>
|
||||
<MS />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,7 +1,9 @@
|
||||
import Head from "next/head";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import IDButton from "./components/identity-button";
|
||||
import IDButton from "../components/identity-button";
|
||||
import WCard from "../components/werefox-card";
|
||||
import MS from "../components/mutant-standard";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
@ -11,12 +13,12 @@ export default function Home() {
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<div className="container space-y-4 mx-auto px-4 py-4">
|
||||
<div className="rounded-lg container ring-4 ring-werefox-blue bg-werefox-grey-light dark:bg-werefox-grey">
|
||||
<WCard isTitle="true">
|
||||
<h1 className="p-4 text-xl text-center text-werefox-blue-dark dark:text-werefox-blue">
|
||||
<span className="animate-bounce relative inline-block w-6 h-6 align-middle">
|
||||
{" "}
|
||||
<Image
|
||||
src="/images/pixel_alexis.png"
|
||||
src="/emoji/pixel_alexis.png"
|
||||
layout="fill"
|
||||
objectFit="contain"
|
||||
alt="Pixel Alexis!"
|
||||
@ -25,8 +27,8 @@ export default function Home() {
|
||||
{"- "}
|
||||
Hi! I'm Alexis Werefox!
|
||||
</h1>
|
||||
</div>
|
||||
<div className="rounded-lg container ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
|
||||
</WCard>
|
||||
<WCard>
|
||||
<div className="grid xl:grid-rows-2 xl:grid-cols-5 sm:grid-rows-3 sm:grid-cols-3 grid-rows-9 grid-cols-1 gap-2">
|
||||
<IDButton
|
||||
extraClasses=""
|
||||
@ -37,14 +39,14 @@ export default function Home() {
|
||||
<IDButton
|
||||
extraClasses="xl:pt-1 xl:align-text-bottom xl:text-sm xl:min-h-full"
|
||||
imageObj={[
|
||||
{
|
||||
src: "/emoji/female_symbol.svg",
|
||||
alt: "Female symbol",
|
||||
},
|
||||
{
|
||||
src: "/emoji/transgender_flag.svg",
|
||||
alt: "Transgender flag",
|
||||
},
|
||||
{
|
||||
src: "/emoji/female_symbol.svg",
|
||||
alt: "Female symbol",
|
||||
},
|
||||
]}
|
||||
innerText="Trans-femme"
|
||||
url="https://trans.wikia.org/wiki/Transfeminine"
|
||||
@ -119,30 +121,35 @@ export default function Home() {
|
||||
url=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-lg container ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
|
||||
<p className="p-4 text-lg text-center text-werefox-pink-dark dark:text-werefox-pink">
|
||||
Somewhere between a hot date and a hot mess. Just a witchy foxxo
|
||||
programmer trying to make it in the world tbh.
|
||||
</WCard>
|
||||
<WCard
|
||||
isCardButton="true"
|
||||
extraClasses=""
|
||||
imageObj={{
|
||||
src: "/emoji/trans_heart.png",
|
||||
alt: "Transgender heart",
|
||||
}}
|
||||
innerText="HRT Tracker!"
|
||||
url="/hrt"
|
||||
/>
|
||||
<WCard>
|
||||
<p className="p-6 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
|
||||
Somewhere between a hot date and a hot mess.
|
||||
<br />
|
||||
Just a witchy foxxo programmer trying to make it in the world tbh.
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-lg container ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
|
||||
<footer className="p-4">
|
||||
<p className="text-center text-xs text-werefox-grey-darker dark:text-werefox-grey-lighter">
|
||||
This site uses{" "}
|
||||
<Link href="https://mutant.tech">
|
||||
<a>Mutant Standard emoji</a>
|
||||
</Link>
|
||||
, which are licensed under a{" "}
|
||||
<Link href="https://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
<a>
|
||||
Creative Commons Attribution-NonCommercial-ShareAlike 4.0
|
||||
International License
|
||||
</a>
|
||||
</Link>
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
</WCard>
|
||||
<WCard
|
||||
isCardButton="true"
|
||||
extraClasses=""
|
||||
imageObj={{
|
||||
src: "/emoji/awoo.svg",
|
||||
alt: "Testimonials",
|
||||
}}
|
||||
innerText="See Testimonials!"
|
||||
url="/testimonials"
|
||||
/>
|
||||
<MS />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
138
src/info/pages/testimonials/index.js
Normal file
138
src/info/pages/testimonials/index.js
Normal file
@ -0,0 +1,138 @@
|
||||
import Head from "next/head";
|
||||
import WCard from "../../components/werefox-card";
|
||||
import TCard from "../../components/testimonial-card";
|
||||
import MS from "../../components/mutant-standard";
|
||||
import axios from "axios";
|
||||
|
||||
// Async functions to grab user avatars server-side
|
||||
|
||||
export const getIcon = async ({ json, name }) =>
|
||||
await axios.get(json).then(
|
||||
({ data }) => [name, data["icon"]["url"]],
|
||||
(error) => {
|
||||
console.log(error)
|
||||
return [name, null];
|
||||
}
|
||||
);
|
||||
|
||||
export const getStaticProps = async () => {
|
||||
const promises = Object.entries(USERS).map(([name, { json }]) =>
|
||||
getIcon({ name, json })
|
||||
);
|
||||
const iconUrls = await Promise.all(promises);
|
||||
return {
|
||||
props: {
|
||||
iconUrls: iconUrls.reduce(
|
||||
(acc, [name, url]) => ({ ...acc, [name]: url }),
|
||||
{}
|
||||
),
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// This is where you put the testimonial users' info
|
||||
|
||||
const USERS = {
|
||||
colabunny: {
|
||||
json: "https://yiff.life/@colabunny.json",
|
||||
url: "https://yiff.life/@colabunny",
|
||||
content: '"please stay your jokes are funny and smart"',
|
||||
},
|
||||
ElfLord: {
|
||||
url: "https://freedom.horse/@ElfLord",
|
||||
json: "https://freedom.horse/@ElfLord.json",
|
||||
content: `"Someday I'm gonna visit you in Texas, and when I get there, I'm going to realize you don't live in Texas at all, and I'm in the wrong state"`,
|
||||
},
|
||||
Decimal: {
|
||||
url: "https://plush.city/@Decimal",
|
||||
json: "https://plush.city/@Decimal.json",
|
||||
content: `"I will appreciate the heck out of you any day"`
|
||||
},
|
||||
skelly: {
|
||||
url: "https://redroo.ml/@skelly",
|
||||
json: "https://redroo.ml/@skelly.json",
|
||||
content: `"this an an official invitation for any one of you to put 'fuck you i dont give testimonials' as a testimonial by me on your profile"`
|
||||
},
|
||||
Drako_Fenris: {
|
||||
url: "https://yiff.life/@Drako_Fenris",
|
||||
json: "https://yiff.life/@Drako_Fenris.json",
|
||||
content: `"[Alexis' future wife] lives in the ether yet to be revealed. she awaits the day her big tiddie goth gf rides in on her unicorn and rescues her."`
|
||||
},
|
||||
"00dani": {
|
||||
url: "https://vulpine.club/@00dani",
|
||||
json: "https://vulpine.club/@00dani.json",
|
||||
content: `"*falls in love with you* haha whoopsies 😳"`
|
||||
},
|
||||
Gumby: {
|
||||
url: "https://puppy.cafe/@Gumby",
|
||||
json: "https://puppy.cafe/@Gumby.json",
|
||||
content: `"im love alexis a lot 💚 🐀"`
|
||||
},
|
||||
AshBunny: {
|
||||
url: "https://vulpine.club/@AshBunny",
|
||||
json: "https://vulpine.club/@AshBunny.json",
|
||||
content: `"heck. I don't think I can take all of this support."`
|
||||
},
|
||||
heatherhorns: {
|
||||
url: "https://plush.city/@heatherhorns",
|
||||
json: "https://plush.city/@heatherhorns.json",
|
||||
content: `";~;
|
||||
|
||||
gpsd gosh"`
|
||||
},
|
||||
lindsays: {
|
||||
url: "https://hackers.town/@lindsays",
|
||||
json: "https://hackers.town/@lindsays.json",
|
||||
content: `"She's an amazing, sweet, beautiful dork, and a spectacular best friend."`
|
||||
},
|
||||
};
|
||||
|
||||
export default function Testimonials({ iconUrls }) {
|
||||
return (
|
||||
<div className="min-h-screen bg-werefox-grey-lighter dark:bg-werefox-grey-dark font-nerd">
|
||||
<Head>
|
||||
<title>Werefox Testimonials</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<div className="container space-y-4 mx-auto px-4 py-4">
|
||||
<WCard
|
||||
isCardButton="true"
|
||||
extraClasses=""
|
||||
imageObj={[
|
||||
{ src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" },
|
||||
{ src: "/emoji/blue_heart.svg", alt: "Blue heart" },
|
||||
]}
|
||||
innerText="Take me back home!"
|
||||
url="/"
|
||||
/>
|
||||
<WCard>
|
||||
<p className="p-6 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
|
||||
Sometimes, people say some nice things about me. Here are some
|
||||
examples!
|
||||
</p>
|
||||
</WCard>
|
||||
{Object.keys(USERS).map((user) => (
|
||||
<TCard
|
||||
key={USERS[user].url}
|
||||
src={iconUrls[user]}
|
||||
alt={`${user}'s Avatar`}
|
||||
url={USERS[user].url}
|
||||
user={user}
|
||||
innerText={USERS[user].content}
|
||||
/>
|
||||
))}
|
||||
<WCard
|
||||
isCardButton="true"
|
||||
extraClasses=""
|
||||
imageObj={[
|
||||
{ src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" },
|
||||
{ src: "/emoji/blue_heart.svg", alt: "Blue heart" },
|
||||
]}
|
||||
innerText="Take me back home!"
|
||||
url="/"
|
||||
/>
|
||||
<MS />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -24,6 +24,18 @@ module.exports = {
|
||||
darker: "#121212",
|
||||
},
|
||||
},
|
||||
flex: {
|
||||
5: "5 5 0%",
|
||||
},
|
||||
keyframes: {
|
||||
wiggle: {
|
||||
"0%, 100%": { transform: "rotate(-2deg)" },
|
||||
"50%": { transform: "rotate(2deg)" },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
wiggle: "wiggle 5s ease-in-out infinite",
|
||||
},
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
|
||||
5
start.sh
5
start.sh
@ -16,9 +16,10 @@ if [ ! -d "./src/info" ]; then
|
||||
sudo chown -R $USER:$USER ./src
|
||||
fi
|
||||
|
||||
if [ $MODE == "dev" ] || [ $MODE == "build" ] || [ $MODE == "prod" ]; then
|
||||
if [ $MODE == "dev" ] || [ $MODE == "build" ] || [ $MODE == "start" ]; then
|
||||
sudo MODE=$MODE docker-compose up --build --force-recreate --remove-orphans -d
|
||||
sudo docker-compose logs -f
|
||||
else
|
||||
echo "Please use 'dev', 'build', or 'prod' as an argument."
|
||||
echo "Please use 'dev', 'build', or 'start' as an argument."
|
||||
exit 1
|
||||
fi
|
||||
Loading…
Reference in New Issue
Block a user