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.

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

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

@ -1,19 +1,34 @@
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 ( return (
<div className="flex-1 overflow-visible"> <div className="flex-1 overflow-visible">
<Link href={url}> <Link href={url}>
<a target={target}> <a target={target}>
<div className="ml-1 mr-1 rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-darker dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light transition"> <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"> <p className="pl-2 pr-2 text-center sm:text-md text-sm">
{inner_text} {inner_text}
</p> </p>
</div> </div>
</a> </a>
</Link> </Link>
</div> </div>
); );
} else {
return (
<div className="flex-1 overflow-visible">
<Link href={url}>
<a target={target}>
<div className="ml-1 mr-1 rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-darker dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light transition">
<p className="pl-2 pr-2 text-center sm:text-md text-sm">
{inner_text}
</p>
</div>
</a>
</Link>
</div>
);
}
} }

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

@ -1,39 +1,82 @@
import FButton from "./footer-button"; import FButton from "./footer-button";
export default function FooterCard() { export default function FooterCard({ local }) {
return ( if (local) {
<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"> return (
<div className="flex text-alice-werefox-red-darker dark:text-alice-werefox-red-light"> <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-1"></div> <div className="flex text-skye-werefox-pink-darker dark:text-skye-werefox-pink">
<FButton <div className="flex-1"></div>
url="https://info.werefox.cafe/contacts"
inner_text="Contact"
is_external="_blank"
/>
<FButton
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-alice-werefox-grey-darkest dark:text-alice-werefox-grey-lightest">
This site uses{" "}
<div className="inline-block pt-1 pb-1">
<FButton <FButton
url="https://mutant.tech" local={true}
inner_text="Mutant Standard emoji" url="https://info.werefox.cafe/contacts"
inner_text="Contact"
is_external="_blank" is_external="_blank"
/> />
</div>
, which are licensed under a{" "}
<div className="inline-block pt-1 pb-1">
<FButton <FButton
url="https://creativecommons.org/licenses/by-nc-sa/4.0/" local={true}
inner_text="Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License" url="https://gitea.werefox.cafe/ada/werefox-cafe"
inner_text=" /src"
is_external="_blank" is_external="_blank"
/> />
<div className="flex-1"></div>
</div> </div>
</div> <div className="text-center text-xs text-skye-werefox-grey-dark dark:text-skye-werefox-grey-lightest">
</footer> 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 (
<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-1"></div>
<FButton
url="https://info.werefox.cafe/contacts"
inner_text="Contact"
is_external="_blank"
/>
<FButton
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-alice-werefox-grey-darkest dark:text-alice-werefox-grey-lightest">
This site uses{" "}
<div className="inline-block pt-1 pb-1">
<FButton
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
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>
);
}
} }

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

@ -2,27 +2,43 @@ 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 }) {
return ( if (local) {
<div className="min-h-screen bg-alice-werefox-grey-light dark:bg-alice-werefox-grey font-nerd"> return (
<Head> <div className="min-h-screen bg-skye-werefox-grey-light dark:bg-skye-werefox-grey font-nerd">
<title>{page_title}</title> <Head>
<link rel="icon" href="/favicon.ico" /> <title>{page_title}</title>
</Head> <link rel="icon" href="/favicon.ico" />
<div className="container space-y-4 mx-auto px-4 py-4"> </Head>
<a rel="me" href="https://yiff.life/@werefox" hidden> <div className="container space-y-4 mx-auto px-4 py-4">
Mastodon <TCard local={true} card_title={card_title} />
</a> {children}
<a rel="me" href="https://masto.werefox.cafe/@kairi" hidden> <FCard local={true} />
Mastodon </div>
</a>
<a rel="me" href="https://masto.werefox.cafe/@ada" hidden>
Mastodon
</a>
<TCard card_title={card_title} />
{children}
<FCard />
</div> </div>
</div> );
); } else {
return (
<div className="min-h-screen bg-alice-werefox-grey-light dark:bg-alice-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">
<a rel="me" href="https://yiff.life/@werefox" hidden>
Mastodon
</a>
<a rel="me" href="https://masto.werefox.cafe/@kairi" hidden>
Mastodon
</a>
<a rel="me" href="https://masto.werefox.cafe/@ada" hidden>
Mastodon
</a>
<TCard card_title={card_title} />
{children}
<FCard />
</div>
</div>
);
}
} }

32
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 }) {
return ( if (local) {
<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"> return (
{renderPossibleInfo(introduction, emoji_paths)} <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">
</div> {renderPossibleInfo(introduction, emoji_paths)}
); </div>
);
} else {
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">
{renderPossibleInfo(introduction, emoji_paths)}
</div>
);
}
} }

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

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

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

@ -2,62 +2,118 @@ 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 (Boolean(new_tab)) { if (local) {
return ( if (Boolean(new_tab)) {
<div> return (
<Link href={url}> <div>
<a <Link href={url}>
className={`${extra_classes} p-2 w-full inline-block text-lg text-center rounded-sm ring-2 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light focus:text-alice-werefox-blue-dark dark:focus:text-alice-werefox-blue-light hover:animate-yip transition`} <a
target="_blank" 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 {images.map((source) => (
key={source} <span
className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top" key={source}
> className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top"
<Image >
src={source.src} <Image
layout="fill" src={source.src}
objectFit="contain" layout="fill"
alt={source.alt} objectFit="contain"
/> alt={source.alt}
</span> />
))} </span>
{` ${title}`} ))}
</a> {` ${title}`}
</Link> </a>
</div> </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 { } else {
return ( if (Boolean(new_tab)) {
<div> return (
<Link href={url}> <div>
<a <Link href={url}>
className={`${extra_classes} p-2 w-full inline-block text-lg text-center rounded-sm ring-2 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light focus:text-alice-werefox-blue-dark dark:focus:text-alice-werefox-blue-light hover:animate-yip transition`} <a
> className={`${extra_classes} p-2 w-full inline-block text-lg text-center rounded-sm ring-2 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light focus:text-alice-werefox-blue-dark dark:focus:text-alice-werefox-blue-light hover:animate-yip transition`}
{images.map((source) => ( target="_blank"
<span >
key={source} {images.map((source) => (
className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top" <span
> key={source}
<Image className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top"
src={source.src} >
layout="fill" <Image
objectFit="contain" src={source.src}
alt={source.alt} layout="fill"
/> objectFit="contain"
</span> alt={source.alt}
))} />
{` ${title}`} </span>
</a> ))}
</Link> {` ${title}`}
</div> </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-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light focus:text-alice-werefox-blue-dark dark:focus:text-alice-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>
);
}
} }
} }

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

@ -1,19 +1,36 @@
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 }) {
return ( if (local) {
<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"> return (
<span className="animate-bounce align-middle inline-block w-6 h-6"> <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">
<Image <span className="animate-bounce align-middle inline-block w-6 h-6">
src="/emoji/:alice:.png" <Image
layout="fill" src="/emoji/:alice:.png"
objectFit="contain" layout="fill"
alt="It's Alice in emoji form." objectFit="contain"
/> alt="It's Alice in emoji form."
</span> />
{"- "} </span>
{card_title} {"- "}
</div> {card_title}
); </div>
);
} else {
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">
<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>
);
}
} }

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

@ -1,29 +1,57 @@
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 (Boolean(title_emoji)) { if (local) {
return ( if (Boolean(title_emoji)) {
<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 "> return (
<span className="object-contain relative inline-block w-8 h-8 mb-1 align-middle"> <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 ">
<Image <span className="object-contain relative inline-block w-8 h-8 mb-1 align-middle">
src={title_emoji["src"]} <Image
layout="fill" src={title_emoji["src"]}
objectFit="contain" layout="fill"
alt={title_emoji["alt"]} objectFit="contain"
/> alt={title_emoji["alt"]}
</span> />
<p className="inline text-md sm:text-lg text-alice-werefox-red-dark dark:text-alice-werefox-red-light"> </span>
{` ${title}`} <p className="inline text-md sm:text-lg text-skye-werefox-pink-dark dark:text-skye-werefox-pink">
</p> {` ${title}`}
</div> </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 { } else {
return ( if (Boolean(title_emoji)) {
<div className="rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red"> return (
<p className="p-4 text-center text-md sm:text-lg text-alice-werefox-red-dark dark:text-alice-werefox-red-light"> <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 ">
{title} <span className="object-contain relative inline-block w-8 h-8 mb-1 align-middle">
</p> <Image
</div> src={title_emoji["src"]}
); layout="fill"
objectFit="contain"
alt={title_emoji["alt"]}
/>
</span>
<p className="inline text-md sm:text-lg text-alice-werefox-red-dark dark:text-alice-werefox-red-light">
{` ${title}`}
</p>
</div>
);
} else {
return (
<div className="rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red">
<p className="p-4 text-center text-md sm:text-lg text-alice-werefox-red-dark dark:text-alice-werefox-red-light">
{title}
</p>
</div>
);
}
} }
} }

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

@ -1,23 +1,45 @@
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 (Boolean(title_emoji)) { if (local) {
return ( if (Boolean(title_emoji)) {
<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"> return (
<WCT title={title} title_emoji={title_emoji} /> <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">
<div className="p-4 space-y-4 rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red"> <WCT local={true} title={title} title_emoji={title_emoji} />
{children} <div className="p-4 space-y-4 rounded-sm ring-2 ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink">
{children}
</div>
</div> </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 { } else {
return ( if (Boolean(title_emoji)) {
<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"> return (
<WCT title={title} /> <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 rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red"> <WCT title={title} title_emoji={title_emoji} />
{children} <div className="p-4 space-y-4 rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red">
{children}
</div>
</div> </div>
</div> );
); } else {
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">
<WCT title={title} />
<div className="p-4 space-y-4 rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red">
{children}
</div>
</div>
);
}
} }
} }

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>
); );