Initial layout and a few pages

This commit is contained in:
2023-10-01 09:12:12 -06:00
parent 6fc8381e6f
commit dc4c8efeb2
36 changed files with 22694 additions and 3041 deletions

25
routes/_404.tsx Normal file
View File

@@ -0,0 +1,25 @@
import { Head } from "$fresh/runtime.ts";
export default function Error404() {
return (
<>
<Head>
<title>404 - Page not found</title>
</Head>
<div class="container w-full">
<div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
<img
class="my-6"
src="/bearcam.gif"
alt="a gif of a bear playing with the camera"
/>
<h1 class="text-4xl font-bold">404 - Page not found</h1>
<p class="my-4">
Looks like we couldn't find what you were looking for, but this bear found a camera!
</p>
<a href="/" class="underline text-sky">Go back home</a>
</div>
</div>
</>
);
}

50
routes/_app.tsx Normal file
View File

@@ -0,0 +1,50 @@
import { AppProps } from "$fresh/server.ts";
import { Nav } from "../components/nav/index.tsx";
export default function App({ Component }: AppProps) {
return (
<html class="dark:bg-smoke dark:text-white">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="cyborggrizzly.svg" type="image/svg" />
<title>MC GRIZZ</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossOrigin="true"
/>
<link
href="https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap"
rel="stylesheet"
>
</link>
<link rel="stylesheet" href="/styles/tailwind.css" />
</head>
<body>
<div class="flex h-[100vh]">
<div class="h-full min-w-[400px] bg-licorice overflow-y-auto border-r-2 p-4 dark:border-sky-950 border-sky text-white flex flex-col">
<div class="flex items-center justify-center p-4 gap-4 mb-8 rounded-3xl bg-smoke-900 border border-sky-950">
<img src="cyborggrizzly.svg" alt="" height={100} width={100} />
<div>
<h1 class="text-4xl font-pixel">MC Grizz</h1>
<hr class="color-sky" />
<small>A Minecraft Server Manager</small>
</div>
</div>
<Nav />
<small class="mt-auto text-center">
Made with love by Emma@Cyborggrizzly 🏳
</small>
</div>
<div class="max-h-full flex-1">
<Component />
</div>
</div>
</body>
</html>
);
}

21
routes/api/joke.ts Normal file
View File

@@ -0,0 +1,21 @@
import { HandlerContext } from "$fresh/server.ts";
// Jokes courtesy of https://punsandoneliners.com/randomness/programmer-jokes/
const JOKES = [
"Why do Java developers often wear glasses? They can't C#.",
"A SQL query walks into a bar, goes up to two tables and says “can I join you?”",
"Wasn't hard to crack Forrest Gump's password. 1forrest1.",
"I love pressing the F5 key. It's refreshing.",
"Called IT support and a chap from Australia came to fix my network connection. I asked “Do you come from a LAN down under?”",
"There are 10 types of people in the world. Those who understand binary and those who don't.",
"Why are assembly programmers often wet? They work below C level.",
"My favourite computer based band is the Black IPs.",
"What programme do you use to predict the music tastes of former US presidential candidates? An Al Gore Rhythm.",
"An SEO expert walked into a bar, pub, inn, tavern, hostelry, public house.",
];
export const handler = (_req: Request, _ctx: HandlerContext): Response => {
const randomIndex = Math.floor(Math.random() * JOKES.length);
const body = JOKES[randomIndex];
return new Response(body);
};

65
routes/index.tsx Normal file
View File

@@ -0,0 +1,65 @@
import { Button } from "../components/Button.tsx";
import { Content } from "../components/Content.tsx";
import { OL } from "../components/OL.tsx";
export default function Home() {
return (
<div class="container p-8">
<Setup />
</div>
);
}
function Setup() {
return (
<Content>
<h2 class="text-2xl font-pixel">First Time Setup</h2>
<p>
Looks like this is your first time running{" "}
<span class="font-fixel">MC Grizz</span>
</p>
<p>There are just a few steps to get you up an running.</p>
<OL color="bg-grape">
<div>
<p class="font-pixel text-lg">Select your loader</p>
<p>Choose between Forge, Fabric, or Vanilla (support for Bukkit, Spigot, and others coming... soon...)</p>
</div>
<div>
<p class="font-pixel text-lg">Accept EULA</p>
<p>
Mojang requires you to accept their{" "}
<a
class="text-sky"
href="https://www.minecraft.net/en-us/eula"
target="_blank"
>
EULA
</a>{" "}
(End-User License Agreement) in order to be able to run a server.
</p>
</div>
<div>
<p class="font-pixel text-lg">Select Mods and Datapacks</p>
<p>
We'll show you a selection of preconfigured modpacks, mods, and
datapacks for you to choose for your server
</p>
</div>
<div>
<p class="font-pixel text-lg">Game On!</p>
<p>
Time to play! We'll finish setting everything up and give you the IP
address for you and your friends to connect.
</p>
</div>
</OL>
<div className="w-full">
<a href="/setup">
<Button href="/setup" color="sky" class="ml-auto mt-8 block font-pixel text-lg">
Get Started
</Button>
</a>
</div>
</Content>
);
}

25
routes/setup/index.tsx Normal file
View File

@@ -0,0 +1,25 @@
import { Button } from "../../components/Button.tsx";
import { Content } from "../../components/Content.tsx";
export default function Setup() {
return (
<div class="container p-8">
<Content>
<h2 className="font-pixel text-2xl">Select Loader</h2>
<p>Choose between Forge, Fabric, or Vanilla</p>
<div class="m-auto flex gap-4 mt-4">
<a href="/setup/vanilla">
<Button>Vanilla</Button>
</a>
<a href="/setup/fabric">
<Button>Fabric</Button>
</a>
<a href="/setup/forge">
<Button>Forge</Button>
</a>
</div>
</Content>
</div>
);
}