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

Added optional flag for local page to change the theme.

Browse Source
This commit is contained in:
Alexis Werefox 2022-09-25 18:52:56 +00:00
parent a24f2336db
commit 5b02231600
10 changed files with 435 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/info/components/footer-button.js
View File

@ -1,8 +1,22 @@
import Link from "next/link"; import Link from "next/link";
export default function footerButton({ url, inner_text, is_external }) { export default function footerButton({ local, url, inner_text, is_external }) {
const target = Boolean(is_external) ? is_external : ""; const target = Boolean(is_external) ? is_external : "";
if (local) {
return (
<div className="flex-1 overflow-visible">
<Link href={url}>
<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">
<p className="pl-2 pr-2 text-center sm:text-md text-sm">
{inner_text}
</p>
</div>
</a>
</Link>
</div>
);
} else {
return ( return (
<div className="flex-1 overflow-visible"> <div className="flex-1 overflow-visible">
<Link href={url}> <Link href={url}>
@ -17,3 +31,4 @@ export default function footerButton({ url, inner_text, is_external }) {
</div> </div>
); );
} }
}

45
src/info/components/footer-card.js
View File

@ -1,5 +1,47 @@
import FButton from "./footer-button"; import FButton from "./footer-button";
export default function FooterCard() { export default function FooterCard({ local }) {
if (local) {
return (
<footer className="p-4 space-y-2 rounded-lg ring-2 ring-skye-werefox-grey dark:ring-skye-werefox-grey-darker bg-skye-werefox-grey-lightest dark:bg-skye-werefox-grey-dark">
<div className="flex text-skye-werefox-pink-darker dark:text-skye-werefox-pink">
<div className="flex-1"></div>
<FButton
local={true}
url="https://info.werefox.cafe/contacts"
inner_text="Contact"
is_external="_blank"
/>
<FButton
local={true}
url="https://gitea.werefox.cafe/ada/werefox-cafe"
inner_text=" /src"
is_external="_blank"
/>
<div className="flex-1"></div>
</div>
<div className="text-center text-xs text-skye-werefox-grey-dark dark:text-skye-werefox-grey-lightest">
This site uses{" "}
<div className="inline-block pt-1 pb-1">
<FButton
local={true}
url="https://mutant.tech"
inner_text="Mutant Standard emoji"
is_external="_blank"
/>
</div>
, which are licensed under a{" "}
<div className="inline-block pt-1 pb-1">
<FButton
local={true}
url="https://creativecommons.org/licenses/by-nc-sa/4.0/"
inner_text="Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License"
is_external="_blank"
/>
</div>
</div>
</footer>
);
} else {
return ( return (
<footer className="p-4 space-y-2 rounded-lg ring-2 ring-alice-werefox-grey dark:ring-alice-werefox-grey-darker bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark"> <footer className="p-4 space-y-2 rounded-lg ring-2 ring-alice-werefox-grey dark:ring-alice-werefox-grey-darker bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark">
<div className="flex text-alice-werefox-red-darker dark:text-alice-werefox-red-light"> <div className="flex text-alice-werefox-red-darker dark:text-alice-werefox-red-light">
@ -37,3 +79,4 @@ export default function FooterCard() {
</footer> </footer>
); );
} }
}

18
src/info/components/home-page.js
View File

@ -2,7 +2,22 @@ import Head from "next/head";
import TCard from "../components/title-card"; import TCard from "../components/title-card";
import FCard from "../components/footer-card"; import FCard from "../components/footer-card";
export default function HomePage({ page_title, card_title, children }) { export default function HomePage({ local, page_title, card_title, children }) {
if (local) {
return (
<div className="min-h-screen bg-skye-werefox-grey-light dark:bg-skye-werefox-grey 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">
<TCard local={true} card_title={card_title} />
{children}
<FCard local={true} />
</div>
</div>
);
} else {
return ( return (
<div className="min-h-screen bg-alice-werefox-grey-light dark:bg-alice-werefox-grey font-nerd"> <div className="min-h-screen bg-alice-werefox-grey-light dark:bg-alice-werefox-grey font-nerd">
<Head> <Head>
@ -26,3 +41,4 @@ export default function HomePage({ page_title, card_title, children }) {
</div> </div>
); );
} }
}

22
src/info/components/introduction-card.js
View File

@ -20,9 +20,9 @@ export function formatCustomEmoji(str, emoji_paths) {
if (Boolean(emoji_paths)) { if (Boolean(emoji_paths)) {
return ( return (
<> <>
{values.map((v, i) => {values.map((v, i) => (
replaceWithImageTags(i, v, emoji_paths[v]) <div key={v}>{replaceWithImageTags(i, v, emoji_paths[v])}</div>
)} ))}
</> </>
); );
} else { } else {
@ -36,11 +36,7 @@ export function renderPossibleInfo(info, emoji_paths) {
infoarray = infoarray.slice(0, infoarray.length - 1); infoarray = infoarray.slice(0, infoarray.length - 1);
return infoarray.map((line) => ( return infoarray.map((line) => (
<div key={line}> <div key={line}>
{line == "" ? ( {line == "" ? <br /> : formatCustomEmoji(line, emoji_paths)}
<br />
) : (
formatCustomEmoji(line, emoji_paths)
)}
</div> </div>
)); ));
} else { } else {
@ -48,10 +44,18 @@ export function renderPossibleInfo(info, emoji_paths) {
} }
} }
export default function introductionCard({ introduction, emoji_paths }) { export default function introductionCard({ local, introduction, emoji_paths }) {
if (local) {
return (
<div className="items-center justify-center space-y-4 p-8 overflow-wrap w-full text-lg text-center text-skye-werefox-pink-dark dark:text-skye-werefox-pink">
{renderPossibleInfo(introduction, emoji_paths)}
</div>
);
} else {
return ( return (
<div className="items-center justify-center space-y-4 p-8 overflow-wrap w-full text-lg text-center text-alice-werefox-red-dark dark:text-alice-werefox-red-light"> <div className="items-center justify-center space-y-4 p-8 overflow-wrap w-full text-lg text-center text-alice-werefox-red-dark dark:text-alice-werefox-red-light">
{renderPossibleInfo(introduction, emoji_paths)} {renderPossibleInfo(introduction, emoji_paths)}
</div> </div>
); );
} }
}

21
src/info/components/page-block.js
View File

@ -1,6 +1,24 @@
import PButton from "./page-button"; import PButton from "./page-button";
export default function ProjectBlock({ pages }) { export default function ProjectBlock({ local, pages }) {
if (local) {
return (
<nav>
<div className="flow space-y-4">
{Object.keys(pages).map((page) => (
<PButton
local={true}
key={page}
title={page}
images={pages[page].images}
url={pages[page].url}
new_tab={Boolean(pages[page].new_tab)}
/>
))}
</div>
</nav>
);
} else {
return ( return (
<nav> <nav>
<div className="flow space-y-4"> <div className="flow space-y-4">
@ -17,3 +35,4 @@ export default function ProjectBlock({ pages }) {
</nav> </nav>
); );
} }
}

56
src/info/components/page-button.js
View File

@ -2,12 +2,67 @@ import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
export default function PageButton({ export default function PageButton({
local,
title, title,
images, images,
url, url,
extra_classes, extra_classes,
new_tab, new_tab,
}) { }) {
if (local) {
if (Boolean(new_tab)) {
return (
<div>
<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`}
target="_blank"
>
{images.map((source) => (
<span
key={source}
className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top"
>
<Image
src={source.src}
layout="fill"
objectFit="contain"
alt={source.alt}
/>
</span>
))}
{` ${title}`}
</a>
</Link>
</div>
);
} else {
return (
<div>
<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`}
>
{images.map((source) => (
<span
key={source}
className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top"
>
<Image
src={source.src}
layout="fill"
objectFit="contain"
alt={source.alt}
/>
</span>
))}
{` ${title}`}
</a>
</Link>
</div>
);
}
} else {
if (Boolean(new_tab)) { if (Boolean(new_tab)) {
return ( return (
<div> <div>
@ -61,3 +116,4 @@ export default function PageButton({
); );
} }
} }
}

19
src/info/components/title-card.js
View File

@ -1,7 +1,23 @@
import Link from "next/link"; 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({ local, card_title }) {
if (local) {
return (
<div className="p-4 w-full rounded-sm ring-4 ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink bg-skye-werefox-grey-lightest dark:bg-skye-werefox-grey-dark text-xl text-center text-skye-werefox-pink-dark dark:text-skye-werefox-pink">
<span className="animate-bounce align-middle inline-block w-6 h-6">
<Image
src="/emoji/:alice:.png"
layout="fill"
objectFit="contain"
alt="It's Alice in emoji form."
/>
</span>
{"- "}
{card_title}
</div>
);
} else {
return ( return (
<div className="p-4 w-full rounded-sm ring-4 ring-alice-werefox-red-dark dark:ring-alice-werefox-red bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark text-xl text-center text-alice-werefox-red-dark dark:text-alice-werefox-red-light"> <div className="p-4 w-full rounded-sm ring-4 ring-alice-werefox-red-dark dark:ring-alice-werefox-red bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark text-xl text-center text-alice-werefox-red-dark dark:text-alice-werefox-red-light">
<span className="animate-bounce align-middle inline-block w-6 h-6"> <span className="animate-bounce align-middle inline-block w-6 h-6">
@ -17,3 +33,4 @@ export default function TitleCard({ card_title }) {
</div> </div>
); );
} }
}

30
src/info/components/werefox-card-title.js
View File

@ -1,6 +1,33 @@
import Image from "next/image"; import Image from "next/image";
export default function WerefoxCardTitle({ title, title_emoji }) { export default function WerefoxCardTitle({ local, title, title_emoji }) {
if (local) {
if (Boolean(title_emoji)) {
return (
<div className="p-4 w-full items-center justify-center align-middle rounded-sm ring-2 ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink ">
<span className="object-contain relative inline-block w-8 h-8 mb-1 align-middle">
<Image
src={title_emoji["src"]}
layout="fill"
objectFit="contain"
alt={title_emoji["alt"]}
/>
</span>
<p className="inline text-md sm:text-lg text-skye-werefox-pink-dark dark:text-skye-werefox-pink">
{` ${title}`}
</p>
</div>
);
} else {
return (
<div className="rounded-sm ring-2 ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink">
<p className="p-4 text-center text-md sm:text-lg text-skye-werefox-pink-dark dark:text-skye-werefox-pink">
{title}
</p>
</div>
);
}
} else {
if (Boolean(title_emoji)) { if (Boolean(title_emoji)) {
return ( return (
<div className="p-4 w-full items-center justify-center align-middle rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red "> <div className="p-4 w-full items-center justify-center align-middle rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red ">
@ -27,3 +54,4 @@ export default function WerefoxCardTitle({ title, title_emoji }) {
); );
} }
} }
}

24
src/info/components/werefox-card.js
View File

@ -1,6 +1,27 @@
import WCT from "./werefox-card-title"; import WCT from "./werefox-card-title";
export default function WerefoxCard({ title_emoji, title, children }) { export default function WerefoxCard({ local, title_emoji, title, children }) {
if (local) {
if (Boolean(title_emoji)) {
return (
<div className="p-4 space-y-4 text-center text-skye-werefox-pink-dark dark:text-skye-werefox-pink rounded-lg ring-2 ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink bg-skye-werefox-grey-lightest dark:bg-skye-werefox-grey-dark">
<WCT local={true} title={title} title_emoji={title_emoji} />
<div className="p-4 space-y-4 rounded-sm ring-2 ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink">
{children}
</div>
</div>
);
} else {
return (
<div className="p-4 space-y-4 text-center text-skye-werefox-pink-dark dark:text-skye-werefox-pink rounded-lg ring-2 ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink bg-skye-werefox-grey-lightest dark:bg-skye-werefox-grey-dark">
<WCT local={true} title={title} />
<div className="p-4 space-y-4 rounded-sm ring-2 ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink">
{children}
</div>
</div>
);
}
} else {
if (Boolean(title_emoji)) { if (Boolean(title_emoji)) {
return ( return (
<div className="p-4 space-y-4 text-center text-alice-werefox-red-dark dark:text-alice-werefox-red-light rounded-lg ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark"> <div className="p-4 space-y-4 text-center text-alice-werefox-red-dark dark:text-alice-werefox-red-light rounded-lg ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark">
@ -21,3 +42,4 @@ export default function WerefoxCard({ title_emoji, title, children }) {
); );
} }
} }
}

18
src/info/pages/local/index.js
View File

@ -32,12 +32,20 @@ export default function Home({ INTRODUCTION, SUBDOMAINS }) {
// const introdict = Object.assign({}, introarray); // const introdict = Object.assign({}, introarray);
return ( return (
<HomePage page_title="Local Network Subdomains" card_title="Local Network Subdomains"> <HomePage
<WCard title="Welcome to local.werefox"> local={true}
<ICard introduction={INTRODUCTION.intro} emoji_paths={{}} /> page_title="Local Network Subdomains"
card_title="Local Network Subdomains"
>
<WCard local={true} title="Welcome to local.werefox">
<ICard
local={true}
introduction={INTRODUCTION.intro}
emoji_paths={{}}
/>
</WCard> </WCard>
<WCard title="Subdomains"> <WCard local={true} title="Subdomains">
<PBlock pages={SUBDOMAINS} /> <PBlock local={true} pages={SUBDOMAINS} />
</WCard> </WCard>
</HomePage> </HomePage>
); );