Adding base pages for other links, added a basic page component.

This commit is contained in:
Alexis Werefox 2021-04-25 06:57:01 +00:00
parent 76516c7511
commit 9a582cfc8b
14 changed files with 434 additions and 239 deletions

View File

@ -0,0 +1,85 @@
import Head from "next/head";
import Image from "next/image";
import WCard from "../components/werefox-card";
import MS from "../components/mutant-standard";
export default function HRT({ is_home, page_title, card_title, children }) {
if(is_home) {
return (
<div className="min-h-screen bg-werefox-grey-lighter dark:bg-werefox-grey-dark font-nerd">
<Head>
<title>{page_title}</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<div className="container space-y-4 mx-auto px-4 py-4">
<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="/emoji/pixel_alexis.png"
layout="fill"
objectFit="contain"
alt="Pixel Alexis!"
/>{" "}
</span>
{"- "}
{card_title}
</h1>
</WCard>
{children}
<MS />
</div>
</div>
);
} else {
return (
<div className="min-h-screen bg-werefox-grey-lighter dark:bg-werefox-grey-dark font-nerd">
<Head>
<title>{page_title}</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 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="/emoji/pixel_alexis.png"
layout="fill"
objectFit="contain"
alt="Pixel Alexis!"
/>{" "}
</span>
{"- "}
{card_title}
</h1>
</WCard>
{children}
<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>
);
}
}

View File

@ -13,7 +13,7 @@ export default function IdentityButton({
<div className="container max-w-sm mx-auto md:px-2 p-2">
<Link href={url}>
<a
target="_blank"
target=""
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) => (

View File

@ -0,0 +1,33 @@
import Link from "next/link";
export default function TestimonialCard({ src, alt, url, innerText, user }) {
const finalsrc = Boolean(src) ? src : "/images/werefox_logo.png";
const isMe = (user == "Shadow8t4") ? "text-werefox-blue-dark dark:text-werefox-blue": "text-werefox-pink-dark dark:text-werefox-pink"
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 ${isMe}`}>
<p>
{innerText}
<br />
{"- "}
<Link href={url}>
<a target="_blank">{`@${user}`}</a>
</Link>
</p>
</div>
</div>
);
}

View File

@ -1,8 +1,8 @@
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";
const isMe = (user == "Shadow8t4") ? "text-werefox-blue-dark dark:text-werefox-blue": "text-werefox-pink-dark dark:text-werefox-pink"
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">
@ -18,7 +18,7 @@ export default function TestimonialCard({ src, alt, url, innerText, user }) {
</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">
<div className={`animate-wiggle flex-5 p-4 sm:text-lg text-xs text-center ${isMe}`}>
<p>
{innerText}
<br />

106
src/info/pages/faq/index.js Normal file
View File

@ -0,0 +1,106 @@
import Head from "next/head";
import Image from "next/image";
import WCard from "../../components/werefox-card";
import TCard from "../../components/testimonial-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 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="/emoji/pixel_alexis.png"
layout="fill"
objectFit="contain"
alt="Pixel Alexis!"
/>{" "}
</span>
{"- "}
Frequently Asked Questions!
</h1>
</WCard>
<WCard>
<p className="p-6 text-lg text-center text-werefox-pink-dark dark:text-werefox-pink">
"So is Werefox like a speicies or...?"
</p>
</WCard>
<TCard
key=""
src="/images/alexis_heart.png"
alt="Alexis"
url="https://vulpine.club/@shadow8t4"
user="Shadow8t4"
innerText="That's a good question! No, my fursona's full name is Alexis Werefox, so Werefox is just a last name. I am just a fox!"
/>
<WCard>
<p className="p-6 text-lg text-center text-werefox-pink-dark dark:text-werefox-pink">
"How can you be Pansexual and a Lesbian?"
</p>
</WCard>
<TCard
key=""
src="/images/alexis_wink.png"
alt="Alexis"
url="https://vulpine.club/@shadow8t4"
user="Shadow8t4"
innerText={`I believe I've been told the proper term is "sapphic", it just means I *am* Pansexual, but I prefer those who identify more femme.`}
/>
<WCard>
<p className="p-6 text-lg text-center text-werefox-pink-dark dark:text-werefox-pink">
"How do I get more Xenia stickers?"
</p>
</WCard>
<TCard
key=""
src="/images/alexis_annoyed.png"
alt="Alexis"
url="https://vulpine.club/@shadow8t4"
user="Shadow8t4"
innerText={`Yeah, about that. So, I've made a few posts aobut this, but when I first started giving those out, I was in a good financial position, among other things. Now I'm not! I will get to it when I do.`}
/>
<WCard>
<p className="p-6 text-lg text-center text-werefox-pink-dark dark:text-werefox-pink">
"What do you do?"
</p>
</WCard>
<TCard
key=""
src="/images/alexis_shrug_fixed.PNG"
alt="Alexis"
url="https://vulpine.club/@shadow8t4"
user="Shadow8t4"
innerText="Something! I mainly focus on maintaining the services I run at the moment, Beat Saber streaming, myself and my transition. I could use some financial support, if you're feeling up to it!"
/>
<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>
);
}

View File

@ -1,43 +1,21 @@
import Head from "next/head";
import BasicPage from "../../components/basic-page-template";
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>
<BasicPage
page_title="Alexis Werefox HRT Tracker"
card_title="Track my HRT progress!"
>
<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>
</BasicPage>
);
}

View File

View File

@ -0,0 +1,12 @@
import BasicPage from "../../../components/basic-page-template"
export default function HRT() {
return (
<BasicPage
page_title="Partners"
card_title="Partners!"
>
</BasicPage>
);
}

View File

@ -1,156 +1,148 @@
import Head from "next/head";
import Link from "next/link";
import Image from "next/image";
import BasicPage from "../components/basic-page-template";
import IDButton from "../components/identity-button";
import WCard from "../components/werefox-card";
import MS from "../components/mutant-standard";
export default function Home() {
return (
<div className="min-h-screen bg-werefox-grey-lighter dark:bg-werefox-grey-dark font-nerd">
<Head>
<title>About A Werefox</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<div className="container space-y-4 mx-auto px-4 py-4">
<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="/emoji/pixel_alexis.png"
layout="fill"
objectFit="contain"
alt="Pixel Alexis!"
/>{" "}
</span>
{"- "}
Hi! I'm Alexis Werefox!
</h1>
</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=""
imageObj={{ src: "/emoji/18_plus.svg", alt: "Over 18" }}
innerText="26"
url=""
/>
<IDButton
extraClasses="xl:pt-1 xl:align-text-bottom xl:text-sm xl:min-h-full"
imageObj={[
{
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"
/>
<IDButton
extraClasses=""
imageObj={{
src: "/emoji/speech_bubble_left.svg",
alt: "",
}}
innerText="She/her"
url="https://pronouns.me/she"
/>
<IDButton
extraClasses=""
imageObj={{
src: "/emoji/polyamory_flag.svg",
alt: "Polyamory flag",
}}
innerText="Polyam"
url="https://lgbta.wikia.org/wiki/Polyamorous"
/>
<IDButton
extraClasses=""
imageObj={{
src: "/emoji/pansexual_flag.svg",
alt: "Pansexual flag",
}}
innerText="Pansexual"
url="https://lgbta.wikia.org/wiki/Pansexual"
/>
<IDButton
extraClasses=""
imageObj={{
src: "/emoji/lesbian_flag.svg",
alt: "Lesbian flag",
}}
innerText="Lesbian"
url="https://lgbta.wikia.org/wiki/Lesbian"
/>
<IDButton
extraClasses=""
imageObj={{
src: "/emoji/blue_heart.svg",
alt: "Blue heart",
}}
innerText="Single"
url=""
/>
<IDButton
extraClasses=""
imageObj={{
src: "/emoji/neurodiversity.svg",
alt: "Neurodiversity symbol",
}}
innerText="ADHD"
url="https://en.wikipedia.org/wiki/Adult_attention_deficit_hyperactivity_disorder"
/>
<IDButton
extraClasses="xl:pt-1 xl:align-text-bottom xl:text-sm xl:min-h-full"
imageObj={[
{
src: "/emoji/fox.svg",
alt: "Fox",
},
{
src: "/emoji/magic_wand.svg",
alt: "Magic wand",
},
]}
innerText="Fox witch"
url=""
/>
</div>
</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>
</WCard>
<WCard
isCardButton="true"
extraClasses=""
imageObj={{
src: "/emoji/awoo.svg",
alt: "Testimonials",
}}
innerText="See Testimonials!"
url="/testimonials"
/>
<MS />
</div>
</div>
<BasicPage
is_home="true"
page_title="About A Werefox"
card_title="Hi! I'm Alexis Werefox!"
>
<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=""
imageObj={{ src: "/emoji/18_plus.svg", alt: "Over 18" }}
innerText="26"
url=""
/>
<IDButton
extraClasses="xl:pt-1 xl:align-text-bottom xl:text-sm xl:min-h-full"
imageObj={[
{
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"
/>
<IDButton
extraClasses=""
imageObj={{
src: "/emoji/speech_bubble_left.svg",
alt: "",
}}
innerText="She/her"
url="https://pronouns.me/she"
/>
<IDButton
extraClasses=""
imageObj={{
src: "/emoji/polyamory_flag.svg",
alt: "Polyamory flag",
}}
innerText="Polyam"
url="https://lgbta.wikia.org/wiki/Polyamorous"
/>
<IDButton
extraClasses=""
imageObj={{
src: "/emoji/pansexual_flag.svg",
alt: "Pansexual flag",
}}
innerText="Pansexual"
url="https://lgbta.wikia.org/wiki/Pansexual"
/>
<IDButton
extraClasses=""
imageObj={{
src: "/emoji/lesbian_flag.svg",
alt: "Lesbian flag",
}}
innerText="Lesbian"
url="https://lgbta.wikia.org/wiki/Lesbian"
/>
<IDButton
extraClasses=""
imageObj={{
src: "/emoji/blue_heart.svg",
alt: "Blue heart",
}}
innerText="Single"
url="/identities/partners"
/>
<IDButton
extraClasses=""
imageObj={{
src: "/emoji/neurodiversity.svg",
alt: "Neurodiversity symbol",
}}
innerText="ADHD"
url="https://en.wikipedia.org/wiki/Adult_attention_deficit_hyperactivity_disorder"
/>
<IDButton
extraClasses="xl:pt-1 xl:align-text-bottom xl:text-sm xl:min-h-full"
imageObj={[
{
src: "/emoji/fox.svg",
alt: "Fox",
},
{
src: "/emoji/magic_wand.svg",
alt: "Magic wand",
},
]}
innerText="Fox witch"
url=""
/>
</div>
</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>
</WCard>
<WCard
isCardButton="true"
extraClasses=""
imageObj={{
src: "/emoji/awoo.svg",
alt: "Testimonials",
}}
innerText="See Testimonials!"
url="/testimonials"
/>
<WCard
isCardButton="true"
extraClasses=""
imageObj={{
src: "/emoji/red_question_mark.svg",
alt: "Frequently Asked Question",
}}
innerText="FAQ"
url="/faq"
/>
</BasicPage>
);
}

View File

@ -1,7 +1,6 @@
import Head from "next/head";
import BasicPage from "../../components/basic-page-template";
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
@ -10,7 +9,7 @@ export const getIcon = async ({ json, name }) =>
await axios.get(json).then(
({ data }) => [name, data["icon"]["url"]],
(error) => {
console.log(error)
console.log(error);
return [name, null];
}
);
@ -46,93 +45,83 @@ const USERS = {
Decimal: {
url: "https://plush.city/@Decimal",
json: "https://plush.city/@Decimal.json",
content: `"I will appreciate the heck out of you any day"`
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"`
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."`
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 😳"`
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 💚 🐀"`
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."`
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"`
gpsd gosh"`,
},
MutoShack: {
url: "https://functional.cafe/@MutoShack",
json: "https://functional.cafe/@MutoShack.json",
content: `"yess w'all say nice things! usually "alexis is the good" and "alexis is the gay"
because it is the truth"`,
},
immychan: {
url: "https://antabaka.me/@immychan",
json: "https://antabaka.me/@immychan.json",
content: `"Oh damn you're cute 😳"`,
},
nautilee: {
url: "https://dragon.style/@nautilee",
json: "https://dragon.style/@nautilee.json",
content: `"...how are you so goshdarn cute"`,
},
lindsays: {
url: "https://hackers.town/@lindsays",
json: "https://hackers.town/@lindsays.json",
content: `Regarding @shadow8t4 : She's an amazing, sweet, beautiful dork, and a spectacular best friend. also, a butt.`
content: `"Regarding @shadow8t4 : She's an amazing, sweet, beautiful dork, and a spectacular best friend. also, a butt."`,
},
};
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="/"
<BasicPage page_title="Werefox Testimonials" card_title="Testimonials!">
<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>
<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>
))}
</BasicPage>
);
}