minor changes to the way some buttons work.

This commit is contained in:
Alexis Werefox 2021-10-17 22:17:26 +00:00
parent 6db150076e
commit f7ef980293
7 changed files with 102 additions and 55 deletions

View File

@ -3,6 +3,25 @@ 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 function renderBackButton(page_button_title, url) {
if (Boolean(page_button_title)) {
return (
<nav>
<PButton
title={page_button_title}
images={[
{ src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" },
{ src: "/emoji/blue_heart.svg", alt: "Blue heart" },
]}
url={url}
/>
</nav>
);
} else {
return <div hidden></div>;
}
}
export default function BasicPage({ export default function BasicPage({
page_title, page_title,
card_title, card_title,
@ -20,27 +39,9 @@ export default function BasicPage({
</Head> </Head>
<div className="container space-y-4 mx-auto px-4 py-4"> <div className="container space-y-4 mx-auto px-4 py-4">
<TCard card_title={card_title} /> <TCard card_title={card_title} />
<nav> {renderBackButton(page_button_title, url)}
<PButton
title={page_button_title}
images={[
{ src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" },
{ src: "/emoji/blue_heart.svg", alt: "Blue heart" },
]}
url={url}
/>
</nav>
{children} {children}
<nav> {renderBackButton(page_button_title, url)}
<PButton
title={page_button_title}
images={[
{ src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" },
{ src: "/emoji/blue_heart.svg", alt: "Blue heart" },
]}
url={url}
/>
</nav>
<FCard /> <FCard />
</div> </div>
</div> </div>

View File

@ -4,7 +4,11 @@ export default function FooterCard() {
<footer className="p-4 space-y-2 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lightest dark:bg-werefox-grey-dark"> <footer className="p-4 space-y-2 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lightest dark:bg-werefox-grey-dark">
<div className="flex text-werefox-blue-darker dark:text-werefox-blue"> <div className="flex text-werefox-blue-darker dark:text-werefox-blue">
<div className="flex-1"></div> <div className="flex-1"></div>
<FButton url="/contacts" inner_text="Contact" /> <FButton
url="https://info.werefox.dev/contacts"
inner_text="Contact"
is_external="_blank"
/>
<FButton <FButton
url="https://gitea.werefox.dev/shadow8t4/info-werefox-dev" url="https://gitea.werefox.dev/shadow8t4/info-werefox-dev"
inner_text=" /src" inner_text=" /src"

View File

@ -10,6 +10,7 @@ export default function ProjectBlock({ pages }) {
title={page} title={page}
images={pages[page].images} images={pages[page].images}
url={pages[page].url} url={pages[page].url}
new_tab={Boolean(pages[page].new_tab)}
/> />
))} ))}
</div> </div>

View File

@ -1,7 +1,40 @@
import Link from "next/link"; import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
export default function PageButton({ title, images, url, extra_classes }) { export default function PageButton({
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-werefox-grey-lightest dark:bg-werefox-grey-dark 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 focus:text-werefox-pink-dark dark:focus:text-werefox-pink 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 ( return (
<div> <div>
<Link href={url}> <Link href={url}>
@ -20,10 +53,11 @@ export default function PageButton({ title, images, url, extra_classes }) {
alt={source.alt} alt={source.alt}
/> />
</span> </span>
))}{" "} ))}
{title} {` ${title}`}
</a> </a>
</Link> </Link>
</div> </div>
); );
}
} }

View File

@ -4,38 +4,46 @@ Nextcloud:
url: "https://cloud.werefox.dev" url: "https://cloud.werefox.dev"
images: images:
- { src: "/emoji/nextcloud_logo.png", alt: "Nextcloud logo" } - { src: "/emoji/nextcloud_logo.png", alt: "Nextcloud logo" }
new_tab: true
"Element": "Element":
url: "https://elem.werefox.dev/" url: "https://elem.werefox.dev/"
images: images:
- { src: "/emoji/element_logo.svg", alt: "Element logo" } - { src: "/emoji/element_logo.svg", alt: "Element logo" }
new_tab: true
Gitea: Gitea:
url: "https://gitea.werefox.dev" url: "https://gitea.werefox.dev"
images: images:
- { src: "/emoji/gitea_logo.svg", alt: "Gitea logo" } - { src: "/emoji/gitea_logo.svg", alt: "Gitea logo" }
new_tab: true
"Info Site": "Info Site":
url: "https://info.werefox.dev" url: "https://info.werefox.dev"
images: images:
- { src: "/images/werefox_logo.svg", alt: "Werefox logo" } - { src: "/images/werefox_logo.svg", alt: "Werefox logo" }
new_tab: true
Mastodon: Mastodon:
url: "https://masto.werefox.dev" url: "https://masto.werefox.dev"
images: images:
- { src: "/emoji/mastodon-logo.png", alt: "Mastodon logo" } - { src: "/emoji/mastodon-logo.png", alt: "Mastodon logo" }
new_tab: true
Pinafore: Pinafore:
url: "https://pina.werefox.dev" url: "https://pina.werefox.dev"
images: images:
- { src: "/emoji/pinafore_logo.svg", alt: "Pinafore logo" } - { src: "/emoji/pinafore_logo.svg", alt: "Pinafore logo" }
new_tab: true
Brutaldon: Brutaldon:
url: "https://brutal.werefox.dev" url: "https://brutal.werefox.dev"
images: images:
- { src: "/emoji/brutaldon_logo.png", alt: "Brutaldon logo" } - { src: "/emoji/brutaldon_logo.png", alt: "Brutaldon logo" }
new_tab: true
PeerTube: PeerTube:
url: "https://vid.werefox.dev" url: "https://vid.werefox.dev"
images: images:
- { src: "/emoji/peertube_logo.svg", alt: "PeerTube logo" } - { src: "/emoji/peertube_logo.svg", alt: "PeerTube logo" }
new_tab: true

View File

@ -1,43 +1,43 @@
--- # Subdomains YAML --- # Subdomains YAML
# lrwxrwxrwx 35 shadow8t4 17 Oct 02:24 aux.werefox.conf -> ../local-available/aux.werefox.conf
# lrwxrwxrwx 37 shadow8t4 17 Oct 02:24 gitea.werefox.conf -> ../local-available/gitea.werefox.conf
# lrwxrwxrwx 36 shadow8t4 17 Oct 02:24 home.werefox.conf -> ../local-available/home.werefox.conf
# lrwxrwxrwx 38 shadow8t4 17 Oct 17:46 kanban.werefox.conf -> ../local-available/kanban.werefox.conf
# lrwxrwxrwx 34 shadow8t4 17 Oct 03:22 pi.werefox.conf -> ../local-available/pi.werefox.conf
# lrwxrwxrwx 37 shadow8t4 17 Oct 02:24 tasmo.werefox.conf -> ../local-available/tasmo.werefox.conf
# lrwxrwxrwx 36 shadow8t4 17 Oct 02:24 wiki.werefox.conf -> ../local-available/wiki.werefox.conf
Airsonic: Airsonic:
url: "https://aux.werefox" url: "https://aux.werefox"
images: images:
- { src: "/emoji/navidrome_logo.png", alt: "Navidrome logo" } - { src: "/emoji/navidrome_logo.png", alt: "Navidrome logo" }
new_tab: true
"(Werefox) Gitea": "(Werefox) Gitea":
url: "https://gitea.werefox" url: "https://gitea.werefox"
images: images:
- { src: "/emoji/gitea_logo.svg", alt: "Gitea logo" } - { src: "/emoji/gitea_logo.svg", alt: "Gitea logo" }
new_tab: true
# "Home Assistant": # "Home Assistant":
# url: "https://home.werefox" # url: "https://home.werefox"
# images: # images:
# - { src: "/emoji/home_assistant_logo.svg", alt: "Home Assistant logo" } # - { src: "/emoji/home_assistant_logo.svg", alt: "Home Assistant logo" }
# new_tab: true
Kanboard: Kanboard:
url: "https://kanban.werefox" url: "https://kanban.werefox"
images: images:
- { src: "/emoji/kanboard_logo.svg", alt: "Kanboard logo" } - { src: "/emoji/kanboard_logo.svg", alt: "Kanboard logo" }
new_tab: true
Pi-Hole: Pi-Hole:
url: "https://pi.werefox" url: "https://pi.werefox/admin"
images: images:
- { src: "/emoji/pi_hole_logo.svg", alt: "Pi-Hole logo" } - { src: "/emoji/pi_hole_logo.svg", alt: "Pi-Hole logo" }
new_tab: true
# TasmoAdmin: # TasmoAdmin:
# url: "https://tasmo.werefox" # url: "https://tasmo.werefox"
# images: # images:
# - { src: "/emoji/tasmoadmin_logo.svg", alt: "TasmoAdmin logo" } # - { src: "/emoji/tasmoadmin_logo.svg", alt: "TasmoAdmin logo" }
# new_tab: true
Wiki.JS: Wiki.JS:
url: "https://wiki.werefox" url: "https://wiki.werefox"
images: images:
- { src: "/emoji/wikijs_logo.svg", alt: "Wiki.JS logo" } - { src: "/emoji/wikijs_logo.svg", alt: "Wiki.JS logo" }
new_tab: true

View File

@ -26,7 +26,6 @@ export default function Contacts({ CONTACTS }) {
<BasicPage <BasicPage
page_title="Where To Find Me" page_title="Where To Find Me"
card_title={`"Do you have a [Social Media]?"`} card_title={`"Do you have a [Social Media]?"`}
page_button_title="Take me back home!"
> >
<WCard title="You can find me in quite a few places!"> <WCard title="You can find me in quite a few places!">
<CBlock contacts={CONTACTS} /> <CBlock contacts={CONTACTS} />