Rough draft of Minecraft server page.

2022-09-26 18:38:11 +00:00 · 2022-09-26 18:38:11 +00:00 · a9c31d6959
commit a9c31d6959
parent 08c5d7c3d6
14 changed files with 258 additions and 35 deletions
--- a/src/info/components/footer-button.js
+++ b/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}>
--- a/src/info/components/footer-card.js
+++ b/src/info/components/footer-card.js
@ -1,18 +1,60 @@
 import FButton from "./footer-button";
-export default function FooterCard({ local }) {
-  if (local) {
+export default function FooterCard({ theme }) {
+  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">
-        <div className="flex text-skye-werefox-pink-darker dark:text-skye-werefox-pink">
+      <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-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"
--- a/src/info/components/home-page.js
+++ b/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 }) {
-  if (local) {
+export default function HomePage({ theme, page_title, card_title, children }) {
+  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>
    );
--- a/src/info/components/introduction-card.js
+++ b/src/info/components/introduction-card.js
@ -44,8 +44,15 @@ export function renderPossibleInfo(info, emoji_paths) {
  }
 }

-export default function introductionCard({ local, introduction, emoji_paths }) {
-  if (local) {
+export default function introductionCard({ theme, introduction, emoji_paths }) {
+  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)}
--- a/src/info/components/page-block.js
+++ b/src/info/components/page-block.js
@ -1,13 +1,13 @@
 import PButton from "./page-button";

-export default function ProjectBlock({ local, pages }) {
-  if (local) {
+export default function ProjectBlock({ theme, pages }) {
+  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}
--- a/src/info/components/page-button.js
+++ b/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>
--- a/src/info/components/title-card.js
+++ b/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 }) {
-  if (local) {
+export default function TitleCard({ theme, card_title }) {
+  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">
--- a/src/info/components/werefox-card-title.js
+++ b/src/info/components/werefox-card-title.js
@ -1,7 +1,34 @@
 import Image from "next/image";

-export default function WerefoxCardTitle({ local, title, title_emoji }) {
-  if (local) {
+export default function WerefoxCardTitle({ theme, title, title_emoji }) {
+  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 ">
--- a/src/info/components/werefox-card.js
+++ b/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 }) {
-  if (local) {
+export default function WerefoxCard({ theme, title_emoji, title, children }) {
+  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>
--- a/src/info/data/minecraft/introduction.yml
+++ b/src/info/data/minecraft/introduction.yml
@ -0,0 +1,4 @@
+--- # Introduction YAML
+
+intro: |
+  Here's some information on the Queercule's Minecraft server.
--- a/src/info/pages/hrt/index.js
+++ b/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>
  );
--- a/src/info/pages/local/index.js
+++ b/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">
-        <PBlock local={true} pages={SUBDOMAINS} />
+      <WCard theme="Skye" title="Subdomains">
+        <PBlock theme="Skye" pages={SUBDOMAINS} />
      </WCard>
    </HomePage>
  );
--- a/src/info/pages/minecraft/index.js
+++ b/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>
+  );
+}
--- a/src/info/tailwind.config.js
+++ b/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",