Begin moving identities data to YAML, site now functions properly with JS disabled.

This commit is contained in:
Alexis Werefox 2021-06-15 03:36:02 +00:00
parent 031581ceec
commit a4e60fa5b8
9 changed files with 137 additions and 86 deletions

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">
<span className="animate-bounce relative inline-block w-6 h-6 align-middle">
<Image src={src} layout="fill" objectFit="contain" alt={alt} />
</span>
<img
className="object-contain animate-bounce relative inline-block w-6 h-6 align-middle"
src={src}
alt={alt}
/>
</a>{" "}
{description}{" "}
<a

View File

@ -11,15 +11,24 @@ export default function IdentityCard({
alt2,
children,
}) {
let infoarray = [];
let infodict = {};
if (info) {
infoarray = info.split("\n");
infoarray = infoarray.slice(0, infoarray.length - 1);
infodict = Object.assign({}, infoarray);
}
if (children) {
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 flow space-y-3">
<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-4 text-center text-lg sm:text-2xl text-werefox-grey-dark dark:text-werefox-grey-lighter">
<span className="relative inline-block w-8 h-8 align-middle mb-1">
<Image src={src} layout="fill" objectFit="contain" alt={alt} />
</span>{" "}
<img
className="object-contain relative inline-block w-8 h-8 align-middle mb-1"
src={src}
alt={alt}
/>{" "}
{title}
</p>
</div>
@ -33,18 +42,20 @@ export default function IdentityCard({
<div className="p-2 flow space-y-3">
<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-4 text-center text-lg sm:text-2xl text-werefox-grey-dark dark:text-werefox-grey-lighter">
<span className="relative inline-block w-8 h-8 align-middle mb-1">
<Image src={src} layout="fill" objectFit="contain" alt={alt} />
</span>{" "}
<img
className="object-contain relative inline-block w-8 h-8 align-middle mb-1"
src={src}
alt={alt}
/>{" "}
{title}
</p>
</div>
<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-4 flow space-y-4 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
{Object.keys(info).map((i) => (
<p key={i}>{info[i]}</p>
<div className="p-4 space-y-4 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
{Object.keys(infodict).map((i) => (
<p key={i}>{infodict[i] == "" ? <br /> : infodict[i]}</p>
))}
</p>
</div>
</div>
<div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
<a href="https://twitter.com/ribbonfemale" target="_blank">
@ -69,18 +80,22 @@ export default function IdentityCard({
<div className="p-2 flow space-y-3" id={title}>
<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-4 text-center text-lg sm:text-2xl text-werefox-grey-dark dark:text-werefox-grey-lighter">
<span className="relative inline-block w-8 h-8 align-middle mb-1">
<Image src={src} layout="fill" objectFit="contain" alt={alt} />
</span>{" "}
<img
className="object-contain relative inline-block w-8 h-8 align-middle mb-1"
src={src}
alt={alt}
/>{" "}
{title}
</p>
</div>
<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-4 flow space-y-4 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
{Object.keys(info).map((i) => (
<p key={i}>{info[i]}</p>
<div className="p-4 space-y-4 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
{Object.keys(infodict).map((i) => (
<p className="overflow-auto" key={i}>
{infodict[i] == "" ? <br /> : infodict[i]}
</p>
))}
</p>
</div>
<div className="pb-4 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
<Link href={url}>
<a
@ -101,18 +116,20 @@ export default function IdentityCard({
<div className="p-2 flow space-y-3">
<div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
<h4 className="p-4 text-center text-lg sm:text-2xl text-werefox-grey-dark dark:text-werefox-grey-lighter">
<span className="relative inline-block w-8 h-8 align-middle mb-1">
<Image src={src} layout="fill" objectFit="contain" alt={alt} />
</span>{" "}
<img
className="relative inline-block w-8 h-8 align-middle mb-1"
src={src}
alt={alt}
/>{" "}
{title}
</h4>
</div>
<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-4 flow space-y-4 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
{Object.keys(info).map((i) => (
<p key={i}>{info[i]}</p>
<div className="p-4 space-y-4 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
{Object.keys(infodict).map((i) => (
<p key={i}>{infodict[i]}</p>
))}
</p>
</div>
</div>
</div>
</div>

11
src/info/data/gender.yml Normal file
View File

@ -0,0 +1,11 @@
--- # Gender YAML
Gender:
title: "Trans-femme"
url: "https://gender.wikia.org/wiki/Transfeminine"
src: "/emoji/transgender_flag.svg"
alt: "The transgender flag"
info: |
This is a bit of a generalized term to mean someone who identifies primarily feminine.
I do personally identify as a girl, but this is a bit more of a P.C. term to use!

View File

@ -6,14 +6,17 @@ export default function Fursona() {
<BasicPage page_title="OwO What's this?" card_title="Fursona Details!">
<IDCard
title="Alexis Werefox"
info={{
info: `That's me, the witchy foxxo herself! 💙`,
more: `Despite making this whole website, I'm honestly not much for talking about myself most of the time, unless I'm feeling particularly good.`,
species: `I'm a fox, though! I think originally based on a fennec, but I've kinda moved away from that design nowadays.`,
magic: `Also, I'm a witch! I have magic powers, which have honestly been mostly used to indulge in kinks, but uhhhhhh... What were we talking about here again?`,
art: `I know! I know! You came here to see some art, yes?! Well, here's a free one for ya!~`,
source: `(this was done by the wonderful @ribbonfemale on Twitter!)`,
}}
info={`That's me, the witchy foxxo herself! 💙
Despite making this whole website, I'm honestly not much for talking about myself most of the time, unless I'm feeling particularly good.
I'm a fox, though! I think originally based on a fennec, but I've kinda moved away from that design nowadays.
Also, I'm a witch! I have magic powers, which have honestly been mostly used to indulge in kinks, but uhhhhhh... What were we talking about here again?
I know! I know! You came here to see some art, yes?! Well, here's a free one for ya!~
(this was done by the wonderful @ribbonfemale on Twitter!)`}
src="/emoji/pixel_alexis.png"
alt="It's me! Alexis Werefox!"
src2="/images/alexis_witch.jpg"

View File

@ -1,19 +1,39 @@
import BasicPage from "../../../components/basic-page";
import IDCard from "../../../components/identity-card";
export default function Gender() {
// An object listing pages folks can visit
export async function getStaticProps() {
const fs = require("fs");
const yaml = require("js-yaml");
let GENDER = "";
try {
let fileContent = fs.readFileSync("./data/gender.yml", "utf8");
GENDER = yaml.load(fileContent);
console.log(GENDER);
} catch (e) {
console.log(e);
}
return {
props: {
GENDER,
},
};
}
export default function Gender({ GENDER }) {
return (
<BasicPage page_title="What's Gender?" card_title="I'm Transgender!">
<IDCard
title="Trans-femme"
info={{
info: `This is a bit of a generalized term to mean someone who identifies primarily feminine.`,
more: `I do personally identify as a girl, but this is a bit more of a P.C. term to use!`,
}}
url="https://gender.wikia.org/wiki/Transfeminine"
src="/emoji/transgender_flag.svg"
alt="The transgender flag"
/>
{Object.keys(GENDER).map((gender) => (
<IDCard
key={gender}
title={GENDER[gender].title}
info={GENDER[gender].info}
url={GENDER[gender].url}
src={GENDER[gender].src}
alt={GENDER[gender].alt}
/>
))}
</BasicPage>
);
}

View File

@ -9,23 +9,27 @@ export default function Neurodiversity() {
>
<IDCard
title="ADHD"
info={{
info: `This stands for "Attention-Deficit Hyperactivity Disorder".`,
neurodivergent: `Addionally, the term "neurodivergent" is a general term meaning someone who lives with a form of mental disorder which may impair or alter the way they act and react to the world around them.`,
adhd: `While the term ADHD does address the attention and hyperactive aspects of the disorder, there are actually many other aspects that often go unaddressed. The main ones, however, are:`,
symptom1: `- Lack of focus, and conversely, hyperfocus!`,
symptom2: `- Impulsiveness`,
symptom3: `- Impaired ability to multitask`,
symptom4: `- Time management issues`,
simpyom5: `- Executive dysfunction (complicated, but basically an inability to do things right away)`,
symptom6: `- Difficulty remembering things (especially details and things we don't find stimulating)`,
symptom7: `- Emotional dysregularity (we have trouble regulating our emotions!)`,
symptom8: `- Last, but not least, is something called "rejection sensitivity", which can be hard to explain, but is essentially an extreme sensitivity to isolation, to the point where we will make up (often harmful and incorrect) reasons for why others must be avoiding us.`,
rejection: `It isn't technically medically accepted, but is proven to be a common symptom among ADHD folks!`,
medical1: `Two basic things you should recgonize about why we are this way is that for one, we don't receive enough Dopamine for accomplishing things compared to neurotypicals, and it makes doing things we don't like incredibly dreadful, and gives us a bit of a dependence on receiving more Dopamine constantly.`,
medical2: `Second, the part of our brain that manages emotional regulation is underdeveloped, which makes our capacity for controlling emotions comparable sometimes to that of a child.`,
conclusion: `There's a lot more I wish I could say, but I can genuinely recommend the following link to the YouTube channel "How to ADHD" if you want to learn more, especially if you believe you have this disorder yourself!`,
}}
info={`This stands for "Attention-Deficit Hyperactivity Disorder".
Addionally, the term "neurodivergent" is a general term meaning someone who lives with a form of mental disorder which may impair or alter the way they act and react to the world around them.
While the term ADHD does address the attention and hyperactive aspects of the disorder, there are actually many other aspects that often go unaddressed. The main ones, however, are:
- Lack of focus, and conversely, hyperfocus!
- Impulsiveness
- Impaired ability to multitask
- Time management issues
- Executive dysfunction (complicated, but basically an inability to do things right away)
- Difficulty remembering things (especially details and things we don't find stimulating)
- Emotional dysregularity (we have trouble regulating our emotions!)
- Last, but not least, is something called "rejection sensitivity", which can be hard to explain, but is essentially an extreme sensitivity to isolation, to the point where we will make up (often harmful and incorrect) reasons for why others must be avoiding us.
It isn't technically medically accepted, but is proven to be a common symptom among ADHD folks!
Two basic things you should recgonize about why we are this way is that for one, we don't receive enough Dopamine for accomplishing things compared to neurotypicals, and it makes doing things we don't like incredibly dreadful, and gives us a bit of a dependence on receiving more Dopamine constantly.
Second, the part of our brain that manages emotional regulation is underdeveloped, which makes our capacity for controlling emotions comparable sometimes to that of a child.
There's a lot more I wish I could say, but I can genuinely recommend the following link to the YouTube channel "How to ADHD" if you want to learn more, especially if you believe you have this disorder yourself!`}
url="https://www.youtube.com/channel/UC-nPM1_kSZf91ZGkcgy_95Q"
src="/emoji/neurodiversity.svg"
alt="The neurodiversity symbol"

View File

@ -51,10 +51,9 @@ export default function Partners({ PARTNERS }) {
title="My loves!"
src="/emoji/blue_heart.svg"
alt="Blue heart emoji"
info={{
info: `Oh! It looks like I don't have any partners at the moment.`,
more: `Oh well!`,
}}
info={`Oh! It looks like I don't have any partners at the moment.
Oh well!`}
></IDCard>
</BasicPage>
);

View File

@ -9,11 +9,11 @@ export default function Pronouns() {
>
<IDCard
title="She/Her"
info={{
info: `When you're referring to me, please use the pronouns "She/Her".`,
more: `If you need some examples, for whatever reason, here are some from the site you can visit by clicking on the link below!`,
examples: `"Today I met a new friend, and she is really nice. She has a wonderful personality. That smile of hers really makes me happy."`,
}}
info={`When you're referring to me, please use the pronouns "She/Her".
If you need some examples, for whatever reason, here are some from the site you can visit by clicking on the link below!
"Today I met a new friend, and she is really nice. She has a wonderful personality. That smile of hers really makes me happy."`}
url="https://pronouns.me/she"
src="/emoji/speech_bubble_left.svg"
alt="A speech bubble emoji"

View File

@ -9,30 +9,27 @@ export default function Sexuality() {
>
<IDCard
title="Polyam"
info={{
info: `Short for "Polyamory", this means that I am okay with having multiple partners!`,
more: `There's a lot I can say about Polyamory, but I feel like if you really want to learn more about it, you might be better off following the link below.`,
}}
info={`Short for "Polyamory", this means that I am okay with having multiple partners!
There's a lot I can say about Polyamory, but I feel like if you really want to learn more about it, you might be better off following the link below.`}
url="https://lgbta.wikia.org/wiki/Polyamorous"
src="/emoji/polyamory_flag.svg"
alt="The polyamory flag"
/>
<IDCard
title="Pansexual"
info={{
info: `This means that I am okay with sexual and romantic partners of any gender identity!`,
more: `Of course, being Pansexual does not mean I cannot have preferences or that I want to date *"anyone"*, just that I am open to it.`,
}}
info={`This means that I am okay with sexual and romantic partners of any gender identity!
Of course, being Pansexual does not mean I cannot have preferences or that I want to date *"anyone"*, just that I am open to it.`}
url="https://lgbta.wikia.org/wiki/Pansexual"
src="/emoji/pansexual_flag.svg"
alt="The pansexual flag"
/>
<IDCard
title="Lesbian"
info={{
info: `This means that I am okay with sexual and romantic partners that are the same gender identity as me!`,
more: `If you have questions about how I could be both Pansexual and Lesiban, I'd refer you to my FAQ.`,
}}
info={`This means that I am okay with sexual and romantic partners that are the same gender identity as me!
If you have questions about how I could be both Pansexual and Lesiban, I'd refer you to my FAQ.`}
url="https://lgbta.wikia.org/wiki/Lesbian"
src="/emoji/lesbian_flag.svg"
alt="The lesbian flag"