Rough draft of Minecraft server page.

This commit is contained in:
Alexis Werefox 2022-09-26 18:38:11 +00:00
parent 08c5d7c3d6
commit a9c31d6959
14 changed files with 258 additions and 35 deletions

View File

@ -1,8 +1,23 @@
import Link from "next/link"; 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 : ""; 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 ( return (
<div className="flex-1 overflow-visible"> <div className="flex-1 overflow-visible">
<Link href={url}> <Link href={url}>

View File

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

View File

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

View File

@ -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 ( 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"> <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)} {renderPossibleInfo(introduction, emoji_paths)}

View File

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

View File

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

View File

@ -1,8 +1,24 @@
import Link from "next/link"; import Link from "next/link";
import Image from "next/image"; 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 ( 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"> <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"> <span className="animate-bounce align-middle inline-block w-6 h-6">

View File

@ -1,7 +1,34 @@
import Image from "next/image"; 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)) { if (Boolean(title_emoji)) {
return ( 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 "> <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 ">

View File

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

View File

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

View File

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

View File

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

View File

@ -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>
);
}

View File

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