minor changes to the way some buttons work.

src/info/components/basic-page.js

@@ -3,6 +3,25 @@ import TCard from "../components/title-card";
 import FCard from "./footer-card";
 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({
   page_title,
   card_title,
@@ -20,27 +39,9 @@ export default function BasicPage({
       </Head>
       <div className="container space-y-4 mx-auto px-4 py-4">
         <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}
-        <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 />
       </div>
     </div>

src/info/components/footer-card.js

@@ -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">
       <div className="flex text-werefox-blue-darker dark:text-werefox-blue">
         <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
           url="https://gitea.werefox.dev/shadow8t4/info-werefox-dev"
           inner_text=" /src"

src/info/components/page-block.js

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

src/info/components/page-button.js

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

src/info/data/homepage/subdomains.yml

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

src/info/data/local/subdomains.yml

@@ -1,43 +1,43 @@
 --- # 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:
   url: "https://aux.werefox"
   images:
     - { src: "/emoji/navidrome_logo.png", alt: "Navidrome logo" }
+  new_tab: true
 
 "(Werefox) Gitea":
   url: "https://gitea.werefox"
   images:
     - { src: "/emoji/gitea_logo.svg", alt: "Gitea logo" }
+  new_tab: true
 
 # "Home Assistant":
 #   url: "https://home.werefox"
 #   images:
 #     - { src: "/emoji/home_assistant_logo.svg", alt: "Home Assistant logo" }
+#   new_tab: true
 
 Kanboard:
   url: "https://kanban.werefox"
   images:
     - { src: "/emoji/kanboard_logo.svg", alt: "Kanboard logo" }
+  new_tab: true
 
 Pi-Hole:
-  url: "https://pi.werefox"
+  url: "https://pi.werefox/admin"
   images:
     - { src: "/emoji/pi_hole_logo.svg", alt: "Pi-Hole logo" }
+  new_tab: true
 
 # TasmoAdmin:
 #   url: "https://tasmo.werefox"
 #   images:
 #     - { src: "/emoji/tasmoadmin_logo.svg", alt: "TasmoAdmin logo" }
+#   new_tab: true
 
 Wiki.JS:
   url: "https://wiki.werefox"
   images:
     - { src: "/emoji/wikijs_logo.svg", alt: "Wiki.JS logo" }
+  new_tab: true

src/info/pages/contacts/index.js

@@ -26,7 +26,6 @@ export default function Contacts({ CONTACTS }) {
     <BasicPage
       page_title="Where To Find Me"
       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!">
         <CBlock contacts={CONTACTS} />