Added optional flag for local page to change the theme.
This commit is contained in:
Alexis Werefox
parent
a24f2336db
commit
5b02231600
|
|
@ -1,19 +1,34 @@
|
|||
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 : "";
|
||||
|
||||
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>
|
||||
);
|
||||
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 (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,39 +1,82 @@
|
|||
import FButton from "./footer-button";
|
||||
export default function FooterCard() {
|
||||
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">
|
||||
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
|
||||
url="https://mutant.tech"
|
||||
inner_text="Mutant Standard emoji"
|
||||
local={true}
|
||||
url="https://info.werefox.cafe/contacts"
|
||||
inner_text="Contact"
|
||||
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"
|
||||
local={true}
|
||||
url="https://gitea.werefox.cafe/ada/werefox-cafe"
|
||||
inner_text=" /src"
|
||||
is_external="_blank"
|
||||
/>
|
||||
<div className="flex-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
<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 (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,27 +2,43 @@ import Head from "next/head";
|
|||
import TCard from "../components/title-card";
|
||||
import FCard from "../components/footer-card";
|
||||
|
||||
export default function HomePage({ page_title, card_title, children }) {
|
||||
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 />
|
||||
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>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,9 +20,9 @@ export function formatCustomEmoji(str, emoji_paths) {
|
|||
if (Boolean(emoji_paths)) {
|
||||
return (
|
||||
<>
|
||||
{values.map((v, i) =>
|
||||
replaceWithImageTags(i, v, emoji_paths[v])
|
||||
)}
|
||||
{values.map((v, i) => (
|
||||
<div key={v}>{replaceWithImageTags(i, v, emoji_paths[v])}</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
|
|
@ -36,11 +36,7 @@ export function renderPossibleInfo(info, emoji_paths) {
|
|||
infoarray = infoarray.slice(0, infoarray.length - 1);
|
||||
return infoarray.map((line) => (
|
||||
<div key={line}>
|
||||
{line == "" ? (
|
||||
<br />
|
||||
) : (
|
||||
formatCustomEmoji(line, emoji_paths)
|
||||
)}
|
||||
{line == "" ? <br /> : formatCustomEmoji(line, emoji_paths)}
|
||||
</div>
|
||||
));
|
||||
} else {
|
||||
|
|
@ -48,10 +44,18 @@ export function renderPossibleInfo(info, emoji_paths) {
|
|||
}
|
||||
}
|
||||
|
||||
export default function introductionCard({ introduction, emoji_paths }) {
|
||||
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>
|
||||
);
|
||||
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 (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,38 @@
|
|||
import PButton from "./page-button";
|
||||
|
||||
export default function ProjectBlock({ pages }) {
|
||||
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>
|
||||
);
|
||||
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 (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,62 +2,118 @@ import Link from "next/link";
|
|||
import Image from "next/image";
|
||||
|
||||
export default function PageButton({
|
||||
local,
|
||||
title,
|
||||
images,
|
||||
url,
|
||||
extra_classes,
|
||||
new_tab,
|
||||
}) {
|
||||
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-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`}
|
||||
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>
|
||||
);
|
||||
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 {
|
||||
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>
|
||||
);
|
||||
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-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`}
|
||||
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-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>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,36 @@
|
|||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function TitleCard({ card_title }) {
|
||||
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>
|
||||
);
|
||||
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 (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,29 +1,57 @@
|
|||
import Image from "next/image";
|
||||
|
||||
export default function WerefoxCardTitle({ title, title_emoji }) {
|
||||
if (Boolean(title_emoji)) {
|
||||
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 ">
|
||||
<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-alice-werefox-red-dark dark:text-alice-werefox-red-light">
|
||||
{` ${title}`}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
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 {
|
||||
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>
|
||||
);
|
||||
if (Boolean(title_emoji)) {
|
||||
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 ">
|
||||
<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-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>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,45 @@
|
|||
import WCT from "./werefox-card-title";
|
||||
|
||||
export default function WerefoxCard({ title_emoji, title, children }) {
|
||||
if (Boolean(title_emoji)) {
|
||||
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} title_emoji={title_emoji} />
|
||||
<div className="p-4 space-y-4 rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red">
|
||||
{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>
|
||||
</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 {
|
||||
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}
|
||||
if (Boolean(title_emoji)) {
|
||||
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} title_emoji={title_emoji} />
|
||||
<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>
|
||||
);
|
||||
);
|
||||
} 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>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,12 +32,20 @@ export default function Home({ INTRODUCTION, SUBDOMAINS }) {
|
|||
// const introdict = Object.assign({}, introarray);
|
||||
|
||||
return (
|
||||
<HomePage page_title="Local Network Subdomains" card_title="Local Network Subdomains">
|
||||
<WCard title="Welcome to local.werefox">
|
||||
<ICard introduction={INTRODUCTION.intro} emoji_paths={{}} />
|
||||
<HomePage
|
||||
local={true}
|
||||
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 title="Subdomains">
|
||||
<PBlock pages={SUBDOMAINS} />
|
||||
<WCard local={true} title="Subdomains">
|
||||
<PBlock local={true} pages={SUBDOMAINS} />
|
||||
</WCard>
|
||||
</HomePage>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue