ada/werefox-cafe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Updated a bunch of component themes and layouts. Fixed some issues with viewing the site without JS.

Browse source
This commit is contained in:
Alexis Werefox 2021-10-12 03:43:39 +00:00
parent 08b26558e0
commit 6ce8cbe74a
15 changed files with 119 additions and 151 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/info/components/basic-page.js
View file

@ -3,7 +3,14 @@ import TCard from "../components/title-card";
import FCard from "./footer-card"; import FCard from "./footer-card";
import PButton from "../components/page-button"; import PButton from "../components/page-button";
export default function BasicPage({ page_title, card_title, children }) { export default function BasicPage({
page_title,
card_title,
children,
back_url,
}) {
const url = Boolean(back_url) ? back_url : "/";
return ( return (
<div className="min-h-screen bg-werefox-grey-lighter dark:bg-werefox-grey-dark font-nerd"> <div className="min-h-screen bg-werefox-grey-lighter dark:bg-werefox-grey-dark font-nerd">
<Head> <Head>
@ -19,7 +26,7 @@ export default function BasicPage({ page_title, card_title, children }) {
{ src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" }, { src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" },
{ src: "/emoji/blue_heart.svg", alt: "Blue heart" }, { src: "/emoji/blue_heart.svg", alt: "Blue heart" },
]} ]}
url="/" url={url}
/> />
</nav> </nav>
{children} {children}
@ -30,7 +37,7 @@ export default function BasicPage({ page_title, card_title, children }) {
{ src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" }, { src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" },
{ src: "/emoji/blue_heart.svg", alt: "Blue heart" }, { src: "/emoji/blue_heart.svg", alt: "Blue heart" },
]} ]}
url="/" url={url}
/> />
</nav> </nav>
<FCard /> <FCard />

31
src/info/components/contacts-link.js
View file

@ -1,21 +1,22 @@
import Link from "next/link";
import Image from "next/image"; 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 (
<p className="md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue"> <div>
<a href={url} target="_blank"> <Link href={url}>
<span className="object-contain animate-bounce relative inline-block w-6 h-6 align-middle"> <a target="_blank">
<Image src={src} layout="fill" objectFit="contain" alt={alt} /> <div className="p-2 md:text-lg sm:text-md text-xs 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">
</span> <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
</a>{" "} <Image src={src} layout="fill" objectFit="contain" alt={alt} />
{description}{" "} </span>{" "}
<a {description}{" "}
className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink" <div className="animate-wiggle inline-flex" target="_blank">
href={url} {url_text}
target="_blank" </div>
> </div>
{url_text} </a>
</a> </Link>
</p> </div>
); );
} }

2
src/info/components/faq-block.js
View file

@ -2,7 +2,7 @@ import FCard from "./faq-card";
export default function FAQBlock({ faqs }) { export default function FAQBlock({ faqs }) {
return ( 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"> <div className="p-4 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) => ( {Object.keys(faqs).map((faq) => (
<FCard <FCard
key={faq} key={faq}

36
src/info/components/faq-card.js
View file

@ -5,38 +5,32 @@ export default function TestimonialCard({ question, answer, src, alt }) {
const finalsrc = Boolean(src) ? src : "/images/logo.png"; const finalsrc = Boolean(src) ? src : "/images/logo.png";
return ( return (
<div className="space-y-1"> <div className="space-y-2">
<div className="ring-2 ring-werefox-pink-dark dark:ring-werefox-pink"> <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"> <p className="p-8 text-center text-lg sm:text-xl text-werefox-pink-dark dark:text-werefox-pink">
{question} {question}
</p> </p>
</div> </div>
<div className="p-2 flex ring-2 ring-werefox-blue-dark dark:ring-werefox-blue"> <div className=" 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">
<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">
<Link href="https://vulpine.club/@shadow8t4"> <a target="_blank">
<a> <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">
<Image <Image
src={finalsrc} src={finalsrc}
layout="fill" layout="fill"
objectFit="contain" objectFit="contain"
alt={alt} alt={alt}
/> />
</a> </div>
</Link> <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">
</div> {answer}
<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"> <br />
<p> {"- @shadow8t4"}
{answer} </div>
<br /> </div>
{"- "} </a>
<Link href="https://vulpine.club/@shadow8t4"> </Link>
<a
target="_blank"
className="transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
>{`@shadow8t4`}</a>
</Link>
</p>
</div>
</div> </div>
</div> </div>
); );

4
src/info/components/footer-card.js
View file

@ -12,7 +12,7 @@ export default function FooterCard() {
/> />
<div className="flex-1"></div> <div className="flex-1"></div>
</div> </div>
<p className="text-center text-xs text-werefox-grey-darkest dark:text-werefox-grey-lightest"> <div className="text-center text-xs text-werefox-grey-darkest dark:text-werefox-grey-lightest">
This site uses{" "} This site uses{" "}
<div className="inline-block pt-1 pb-1"> <div className="inline-block pt-1 pb-1">
<FButton <FButton
@ -29,7 +29,7 @@ export default function FooterCard() {
is_external="_blank" is_external="_blank"
/> />
</div> </div>
</p> </div>
</footer> </footer>
); );
} }

30
src/info/components/project-block.js
View file

@ -2,26 +2,24 @@ import PCard from "./project-card";
export default function ProjectCardBlock({ title, cards }) { export default function ProjectCardBlock({ title, cards }) {
return ( return (
<div className="p-2 flow space-y-3 w-full"> <div className="p-2 space-y-4">
<div className="p-2 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker w-full bg-werefox-grey-lighter dark:bg-werefox-grey-dark"> <div className="p-2 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
<p className="sm:text-xl text-lg text-center text-werefox-blue-dark dark:text-werefox-blue"> <p className="sm:text-xl text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
{title} {title}
</p> </p>
</div> </div>
<div className="p-2 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker w-full bg-werefox-grey-lighter dark:bg-werefox-grey-dark"> <ul className="p-4 space-y-4 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
<ul className="space-y-3 w-full text-werefox-blue-dark dark:text-werefox-blue"> {Object.keys(cards).map((card) => (
{Object.keys(cards).map((card) => ( <PCard
<PCard key={card}
key={card} title={card}
title={card} url={cards[card].url}
url={cards[card].url} src={cards[card].src}
src={cards[card].src} alt={cards[card].alt}
alt={cards[card].alt} description={cards[card].description}
description={cards[card].description} />
/> ))}
))} </ul>
</ul>
</div>
</div> </div>
); );
} }

44
src/info/components/project-card.js
View file

@ -12,34 +12,20 @@ export default function projectCard({
const open_new_tab = new_tab ? "_blank" : ""; const open_new_tab = new_tab ? "_blank" : "";
return ( return (
<li className="p2 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker w-full bg-werefox-grey-light dark:bg-werefox-grey"> <div>
<div className="p-2 flow space-y-2 w-full"> <Link href={url}>
<div className="p-3 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker w-full bg-werefox-grey-lighter dark:bg-werefox-grey-dark"> <a target={open_new_tab}>
<div className="text-lg text-center text-werefox-blue-dark dark:text-werefox-blue"> <li className="p-4 space-y-2 rounded-sm ring-2 text-werefox-blue-dark dark:text-werefox-blue hover:text-werefox-pink-dark dark:hover:text-werefox-pink ring-werefox-blue-dark dark:ring-werefox-blue hover:ring-werefox-pink-dark dark:hover:ring-werefox-pink hover:animate-yip transition">
<Link href={url}> <div className="text-lg text-center">
<a <span className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top">
target={open_new_tab} <Image src={src} layout="fill" objectFit="contain" alt={alt} />
className="transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink" </span>
> {` ${title}`}
<span className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top"> </div>
<Image <div className="text-md text-center">{description}</div>
src={src} </li>
layout="fill" </a>
objectFit="contain" </Link>
alt={alt} </div>
/>
</span>{" "}
{title}
</a>
</Link>
</div>
</div>
<div className="p-3 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker w-full bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
<p className="text-md text-center text-werefox-blue-dark dark:text-werefox-blue">
{description}
</p>
</div>
</div>
</li>
); );
} }

71
src/info/components/testimonial-card.js
View file

@ -3,55 +3,38 @@ import Link from "next/link";
export default function TestimonialCard({ src, alt, url, innerText, user }) { export default function TestimonialCard({ src, alt, url, innerText, user }) {
const finalsrc = Boolean(src) ? src : "/images/logo.png"; const finalsrc = Boolean(src) ? src : "/images/logo.png";
const isMe =
user == "Shadow8t4"
? "text-werefox-blue-dark dark:text-werefox-blue"
: "text-werefox-pink-dark dark:text-werefox-pink";
const isMeLink =
user == "Shadow8t4"
? "hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
: "hover:text-werefox-blue-dark dark:hover:text-werefox-blue";
let testimonialarray = innerText.split("\n"); let testimonialarray = innerText.split("\n");
testimonialarray = testimonialarray.slice(0, testimonialarray.length - 1); testimonialarray = testimonialarray.slice(0, testimonialarray.length - 1);
const testimonialdict = Object.assign({}, testimonialarray); const testimonialdict = Object.assign({}, testimonialarray);
return ( return (
<div className="min-w-full flex overflow-hidden ring-2 ring-werefox-pink-dark dark:ring-werefox-pink transition"> <div className="ring-2 ring-werefox-pink-dark dark:ring-werefox-pink hover:ring-werefox-blue-dark dark:hover:ring-werefox-blue text-werefox-pink-dark dark:text-werefox-pink hover:text-werefox-blue-dark dark:hover:text-werefox-blue hover:animate-yip transition">
<div className="order-1 flex-1 flex-shrink-0 pt-4 pb-4 pl-4"> <Link href={url}>
<Link href={url}> <a target="_blank">
<a> <div className="min-w-full flex overflow-hidden">
{" "} <div className="order-1 flex-1 flex-shrink-0 pt-4 pb-4 pl-4">
<span className="relative inline-block rounded-lg sm:w-32 w-16 sm:h-32 h-16"> <span className="relative inline-block rounded-lg sm:w-32 w-16 sm:h-32 h-16">
<Image <Image
src={finalsrc} src={finalsrc}
layout="fill" layout="fill"
objectFit="contain" objectFit="contain"
alt={alt} alt={alt}
/> />
</span>{" "} </span>
</a> </div>
</Link> <div className="order-2 flex flex-5 p-4 items-center justify-center min-h-full">
</div> <div className="animate-wiggle sm:text-lg text-xs text-center">
<div className="order-2 flex flex-5 p-4 items-center justify-center min-h-full"> {Object.keys(testimonialdict).map((t) => (
<div <p className="overflow-auto" key={t}>
className={`animate-wiggle sm:text-lg text-xs text-center ${isMe}`} {testimonialdict[t] == "" ? <br /> : testimonialdict[t]}
> </p>
{Object.keys(testimonialdict).map((t) => ( ))}
<p className="overflow-auto" key={t}> {`- @${user}`}
{testimonialdict[t] == "" ? <br /> : testimonialdict[t]} </div>
</p> </div>
))} </div>
<p> </a>
{"- "} </Link>
<Link href={url}>
<a
target="_blank"
className={`transition ${isMeLink}`}
>{`@${user}`}</a>
</Link>
</p>
</div>
</div>
</div> </div>
); );
} }

25
src/info/components/title-card.js
View file

@ -1,20 +1,19 @@
import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
export default function TitleCard({ card_title }) { export default function TitleCard({ card_title }) {
return ( return (
<div className="rounded-lg ring-4 ring-werefox-blue-dark dark:ring-werefox-blue bg-werefox-grey-light dark:bg-werefox-grey"> <div className="p-4 w-full rounded-lg ring-4 ring-werefox-blue-dark dark:ring-werefox-blue bg-werefox-grey-light dark:bg-werefox-grey text-xl text-center text-werefox-blue-dark dark:text-werefox-blue">
<p className="p-4 w-full inline-block text-xl text-center text-werefox-blue-dark dark:text-werefox-blue"> <span className="animate-bounce align-middle inline-block w-6 h-6">
<span className="animate-bounce inline-block w-6 h-6 align-middle"> <Image
<Image src="/emoji/pixel_alexis.png"
src="/emoji/pixel_alexis.png" layout="fill"
layout="fill" objectFit="contain"
objectFit="contain" alt="Pixel Alexis!"
alt="Pixel Alexis!" />
/> </span>
</span> {"- "}
{"- "} {card_title}
{card_title}
</p>
</div> </div>
); );
} }

4
src/info/data/identities/partners.yml
View file

@ -4,7 +4,7 @@ lindsays:
url: "https://hackers.town/@lindsays" url: "https://hackers.town/@lindsays"
avi: "/images/lindsays.png" avi: "/images/lindsays.png"
fields: fields:
with!: "@Kitredgrave@vulpine.club, @muggle@hackers.town, @autumnal@hackers.town (when she is around), @moonbolt@mst3k.interlinked.me::*, @alexis@masto.werefox.dev, $RO, $BUN | polysaturated" with!: "@Kitredgrave@vulpine.club, @muggle@hackers.town, @autumnal@hackers.town (when she is around), @moonbolt@mst3k.interlinked.me::*, @alexis@masto.werefox.dev, $RO, $BUN, $EM | polysaturated"
"Matrix: ask!": "discord: no!" "Matrix: ask!": "discord: no!"
queeeeer: ":qhTrans: :qhPolyro: :qhPolyam:" queeeeer: ":qhTrans: :qhPolyro: :qhPolyam:"
LiberaPay: "https://liberapay.com/Lindsayschmocker" LiberaPay: "https://liberapay.com/Lindsayschmocker"
@ -21,8 +21,8 @@ karma:
url: "https://awoo.space/@karma" url: "https://awoo.space/@karma"
avi: "/images/karma.png" avi: "/images/karma.png"
fields: fields:
">:3": "flubebnez"
age: 29 age: 29
pronouns: "she/her"
bio: | bio: |
Karma / Beatrice / Bea Karma / Beatrice / Bea

2
src/info/pages/projects/other/index.js
View file

@ -22,7 +22,7 @@ export async function getStaticProps() {
export default function Services({ OTHER }) { export default function Services({ OTHER }) {
return ( return (
<BasicPage page_title="Misc Projects" card_title="Some other things I do!"> <BasicPage page_title="Misc Projects" card_title="Some other things I do!" back_url="/projects">
<div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey"> <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
<PBlock title="Miscelaneous Projects" cards={OTHER} /> <PBlock title="Miscelaneous Projects" cards={OTHER} />
</div> </div>

2
src/info/pages/projects/private/index.js
View file

@ -22,7 +22,7 @@ export async function getStaticProps() {
export default function Services({ PRIVATE }) { export default function Services({ PRIVATE }) {
return ( return (
<BasicPage page_title="Private Services" card_title="Some stuff I host for myself!"> <BasicPage page_title="Private Services" card_title="Some stuff I host for myself!" back_url="/projects">
<div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey"> <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
<PBlock title="Private Services" cards={PRIVATE} /> <PBlock title="Private Services" cards={PRIVATE} />
</div> </div>

2
src/info/pages/projects/services/index.js
View file

@ -22,7 +22,7 @@ export async function getStaticProps() {
export default function Services({ SERVICES }) { export default function Services({ SERVICES }) {
return ( return (
<BasicPage page_title="Werefox Services" card_title="Services I Host!"> <BasicPage page_title="Werefox Services" card_title="Services I Host!" back_url="/projects">
<div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey"> <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
<PBlock title="Services" cards={SERVICES} /> <PBlock title="Services" cards={SERVICES} />
</div> </div>

2
src/info/pages/projects/streaming/index.js
View file

@ -22,7 +22,7 @@ export async function getStaticProps() {
export default function Services({ STREAMING }) { export default function Services({ STREAMING }) {
return ( return (
<BasicPage page_title="Streaming Links" card_title="Come watch my streams!"> <BasicPage page_title="Streaming Links" card_title="Come watch my streams!" back_url="/projects">
<div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey"> <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
<PBlock title="Streaming" cards={STREAMING} /> <PBlock title="Streaming" cards={STREAMING} />
</div> </div>

2
src/info/pages/testimonials/index.js
View file

@ -47,7 +47,7 @@ export default function Testimonials({ iconUrls, TESTIMONIALS }) {
innerText={`Sometimes, people say some nice things about me. Here are some innerText={`Sometimes, people say some nice things about me. Here are some
examples!`} examples!`}
> >
<div className="p-2 space-between-0"> <div className="p-2 space-y-4">
{Object.keys(TESTIMONIALS).map((user) => ( {Object.keys(TESTIMONIALS).map((user) => (
<TCard <TCard
key={TESTIMONIALS[user].url} key={TESTIMONIALS[user].url}