Rough draft of Minecraft server page.

src/info/components/footer-button.js

@@ -1,8 +1,23 @@
 import Link from "next/link";
 
-export default function footerButton({ local, url, inner_text, is_external }) {
+export default function footerButton({ theme, url, inner_text, is_external }) {
   const target = Boolean(is_external) ? is_external : "";
-  if (local) {
+  if (theme == "Ada") {
+    return (
+      <div className="flex-1 overflow-visible">
+        <Link href={url}>
+          <a target={target}>
+            <div className="ml-1 mr-1 rounded-sm ring-2 ring-ada-werefox-cyan-dark dark:ring-ada-werefox-cyan hover:ring-skye-werefox-blue-dark dark:hover:ring-skye-werefox-blue  text-ada-werefox-cyan-darker dark:text-ada-werefox-cyan 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>
+    );
+  } 
+  if (theme == "Skye") {
     return (
       <div className="flex-1 overflow-visible">
         <Link href={url}>

src/info/components/footer-card.js

@@ -1,18 +1,60 @@
 import FButton from "./footer-button";
-export default function FooterCard({ local }) {
+export default function FooterCard({ theme }) {
-  if (local) {
+  if (theme == "Ada") {
     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">
+      <footer className="p-4 space-y-2 rounded-lg ring-2 ring-ada-werefox-grey dark:ring-ada-werefox-grey-darker bg-ada-werefox-grey-lightest dark:bg-ada-werefox-grey-dark">
-        <div className="flex text-skye-werefox-pink-darker dark:text-skye-werefox-pink">
+        <div className="flex text-ada-werefox-cyan-darker dark:text-ada-werefox-cyan">
           <div className="flex-1"></div>
           <FButton
-            local={true}
+            theme="Ada"
             url="https://info.werefox.cafe/contacts"
             inner_text="Contact"
             is_external="_blank"
           />
           <FButton
-            local={true}
+            theme="Ada"
+            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-ada-werefox-grey-dark dark:text-ada-werefox-grey-lightest">
+          This site uses{" "}
+          <div className="inline-block pt-1 pb-1">
+            <FButton
+              theme="Ada"
+              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
+              theme="Ada"
+              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>
+    );
+  } 
+  if (theme == "Skye") {
+    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
+            theme="Skye"
+            url="https://info.werefox.cafe/contacts"
+            inner_text="Contact"
+            is_external="_blank"
+          />
+          <FButton
+            theme="Skye"
             url="https://gitea.werefox.cafe/ada/werefox-cafe"
             inner_text=" /src"
             is_external="_blank"
@@ -23,7 +65,7 @@ export default function FooterCard({ local }) {
           This site uses{" "}
           <div className="inline-block pt-1 pb-1">
             <FButton
-              local={true}
+              theme="Skye"
               url="https://mutant.tech"
               inner_text="Mutant Standard emoji"
               is_external="_blank"
@@ -32,7 +74,7 @@ export default function FooterCard({ local }) {
           , which are licensed under a{" "}
           <div className="inline-block pt-1 pb-1">
             <FButton
-              local={true}
+              theme="Skye"
               url="https://creativecommons.org/licenses/by-nc-sa/4.0/"
               inner_text="Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License"
               is_external="_blank"

src/info/components/home-page.js

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

src/info/components/introduction-card.js

@@ -44,8 +44,15 @@ export function renderPossibleInfo(info, emoji_paths) {
   }
 }
 
-export default function introductionCard({ local, introduction, emoji_paths }) {
+export default function introductionCard({ theme, introduction, emoji_paths }) {
-  if (local) {
+  if (theme == "Ada") {
+    return (
+      <div className="items-center justify-center space-y-4 p-8 overflow-wrap w-full text-lg text-center text-ada-werefox-cyan-dark dark:text-ada-werefox-cyan">
+        {renderPossibleInfo(introduction, emoji_paths)}
+      </div>
+    );
+  } 
+  if (theme == "Skye") {
     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)}

src/info/components/page-block.js

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

src/info/components/page-button.js

@@ -2,14 +2,14 @@ import Link from "next/link";
 import Image from "next/image";
 
 export default function PageButton({
-  local,
+  theme,
   title,
   images,
   url,
   extra_classes,
   new_tab,
 }) {
-  if (local) {
+  if (theme == "Skye") {
     if (Boolean(new_tab)) {
       return (
         <div>

src/info/components/title-card.js

@@ -1,8 +1,24 @@
 import Link from "next/link";
 import Image from "next/image";
 
-export default function TitleCard({ local, card_title }) {
+export default function TitleCard({ theme, card_title }) {
-  if (local) {
+  if (theme == "Ada") {
+    return (
+      <div className="p-4 w-full rounded-sm ring-4 ring-ada-werefox-cyan-dark dark:ring-ada-werefox-cyan bg-ada-werefox-grey-lightest dark:bg-ada-werefox-grey-dark text-xl text-center text-ada-werefox-cyan-dark dark:text-ada-werefox-cyan">
+        <span className="animate-bounce align-middle inline-block w-6 h-6">
+          <Image
+            src="/emoji/pixel_alexis.png"
+            layout="fill"
+            objectFit="contain"
+            alt="That's me!! Skye!"
+          />
+        </span>
+        {"- "}
+        {card_title}
+      </div>
+    );
+  } 
+  if (theme == "Skye") {
     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">

src/info/components/werefox-card-title.js

@@ -1,7 +1,34 @@
 import Image from "next/image";
 
-export default function WerefoxCardTitle({ local, title, title_emoji }) {
+export default function WerefoxCardTitle({ theme, title, title_emoji }) {
-  if (local) {
+  if (theme == "Ada") {
+    if (Boolean(title_emoji)) {
+      return (
+        <div className="p-4 w-full items-center justify-center align-middle rounded-sm ring-2 ring-ada-werefox-cyan-dark dark:ring-ada-werefox-cyan ">
+          <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-ada-werefox-cyan-dark dark:text-ada-werefox-cyan">
+            {` ${title}`}
+          </p>
+        </div>
+      );
+    } else {
+      return (
+        <div className="rounded-sm ring-2 ring-ada-werefox-cyan-dark dark:ring-ada-werefox-cyan">
+          <p className="p-4 text-center text-md sm:text-lg text-ada-werefox-cyan-dark dark:text-ada-werefox-cyan">
+            {title}
+          </p>
+        </div>
+      );
+    }
+  } 
+  if (theme == "Skye") {
     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 ">

src/info/components/werefox-card.js

@@ -1,11 +1,32 @@
 import WCT from "./werefox-card-title";
 
-export default function WerefoxCard({ local, title_emoji, title, children }) {
+export default function WerefoxCard({ theme, title_emoji, title, children }) {
-  if (local) {
+  if (theme == "Ada") {
+    if (Boolean(title_emoji)) {
+      return (
+        <div className="p-4 space-y-4 text-center text-ada-werefox-cyan-dark dark:text-ada-werefox-cyan rounded-lg ring-2 ring-ada-werefox-cyan-dark dark:ring-ada-werefox-cyan bg-ada-werefox-grey-lightest dark:bg-ada-werefox-grey-dark">
+          <WCT theme="Ada" title={title} title_emoji={title_emoji} />
+          <div className="p-4 space-y-4 rounded-sm ring-2 ring-ada-werefox-cyan-dark dark:ring-ada-werefox-cyan">
+            {children}
+          </div>
+        </div>
+      );
+    } else {
+      return (
+        <div className="p-4 space-y-4 text-center text-ada-werefox-cyan-dark dark:text-ada-werefox-cyan rounded-lg ring-2 ring-ada-werefox-cyan-dark dark:ring-ada-werefox-cyan bg-ada-werefox-grey-lightest dark:bg-ada-werefox-grey-dark">
+          <WCT theme="Ada" title={title} />
+          <div className="p-4 space-y-4 rounded-sm ring-2 ring-ada-werefox-cyan-dark dark:ring-ada-werefox-cyan">
+            {children}
+          </div>
+        </div>
+      );
+    }
+  } 
+  if (theme == "Skye") {
     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} />
+          <WCT theme="Skye" 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>
@@ -14,7 +35,7 @@ export default function WerefoxCard({ local, title_emoji, title, children }) {
     } 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} />
+          <WCT theme="Skye" 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>

src/info/data/minecraft/introduction.yml

@@ -0,0 +1,4 @@
+--- # Introduction YAML
+
+intro: |
+  Here's some information on the Queercule's Minecraft server.

src/info/pages/hrt/index.js

@@ -30,8 +30,9 @@ export const getServerSideProps = async () => {
   };
 };
 
-export default function HRT({ startTimes }) {
+export default function HRT({ startTimes, a }) {
   const [timesArray, setTimesArray] = useState(startTimes);
+  const result = useState(a);
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -53,6 +54,7 @@ export default function HRT({ startTimes }) {
             <p key={t}>{timesArray[t]}</p>
           ))}
         </div>
+        <div>{result}</div>
       </WCard>
     </BasicPage>
   );

src/info/pages/local/index.js

@@ -33,19 +33,19 @@ export default function Home({ INTRODUCTION, SUBDOMAINS }) {
 
   return (
     <HomePage
-      local={true}
+      theme="Skye"
       page_title="Local Network Subdomains"
       card_title="Local Network Subdomains"
     >
-      <WCard local={true} title="Welcome to local.werefox">
+      <WCard theme="Skye" title="Welcome to local.werefox">
         <ICard
-          local={true}
+          theme="Skye"
           introduction={INTRODUCTION.intro}
           emoji_paths={{}}
         />
       </WCard>
-      <WCard local={true} title="Subdomains">
+      <WCard theme="Skye" title="Subdomains">
-        <PBlock local={true} pages={SUBDOMAINS} />
+        <PBlock theme="Skye" pages={SUBDOMAINS} />
       </WCard>
     </HomePage>
   );

src/info/pages/minecraft/index.js

@@ -0,0 +1,66 @@
+import HomePage from "../../components/home-page";
+import ICard from "../../components/introduction-card";
+import WCard from "../../components/werefox-card";
+import axios from "axios";
+
+export const getPlugins = async () =>
+  await axios.get("http://192.168.0.202:8111/api/plugins/list").then(
+    (result) => {
+      return result.data;
+    },
+    (error) => {
+      console.log(error);
+      return null;
+    }
+  );
+
+// Grab data from a static YAML file
+export async function getStaticProps() {
+  const fs = require("fs");
+  const yaml = require("js-yaml");
+  let INTRODUCTION = {};
+  const promise = getPlugins();
+  const plugins = await Promise.resolve(promise);
+  const plugins_sorted = plugins.plugins
+    .map((p) => {
+      return p[0].toUpperCase() + p.substr(1);
+    })
+    .sort();
+
+  try {
+    let fileContent = fs.readFileSync(
+      "./data/minecraft/introduction.yml",
+      "utf8"
+    );
+    INTRODUCTION = yaml.load(fileContent);
+  } catch (e) {
+    console.log(e);
+  }
+  return {
+    props: {
+      INTRODUCTION,
+      plugins_list: plugins_sorted,
+    },
+  };
+}
+
+export default function Minecraft({ plugins_list, INTRODUCTION }) {
+  return (
+    <HomePage
+      theme="Ada"
+      page_title="Minecraft Server Info"
+      card_title="Minecraft Server Info"
+    >
+      <WCard theme="Ada" title="Queercule Minecraft Server">
+        <ICard theme="Ada" introduction={INTRODUCTION.intro} emoji_paths={{}} />
+      </WCard>
+      <WCard theme="Ada" title="Plugins">
+        {Object.keys(plugins_list).map((plugin) => (
+          <div key={plugin} className="">
+            - {plugins_list[plugin]}
+          </div>
+        ))}
+      </WCard>
+    </HomePage>
+  );
+}

src/info/tailwind.config.js

@@ -12,6 +12,14 @@ module.exports = {
           DEFAULT: "#50FFFF",
           dark: "#008888",
         },
+        "ada-werefox-grey": {
+          lightest: "#EEE",
+          lighter: "#DBDBDB",
+          light: "#CCC",
+          DEFAULT: "#424242",
+          dark: "#242424",
+          darker: "#121212",
+        },
         "skye-werefox-blue": {
           light: "#94C2FF",
           DEFAULT: "#75B1FF",