feat: minecraft downloads

pages/minecraft.vue

@@ -1,12 +1,118 @@
+<script setup lang="ts">
+const downloadURL = "https://cdn.greasygang.co/greasycraft/";
+const files = ["curseforge.zip", "prism.zip", "modrinth.mrpack	"];
+</script>
 <template>
 	<main>
 		<NuxtImg
 			class="absolute -z-100 size-full op-80 overflow-hidden object-cover"
 			src="GoopBGTransparent.png"
 		></NuxtImg>
-		<div class="items-center flex h-screen justify-center flex-col">
-			<NuxtImg class="w-6/7 max-w-200" src="greasycraft.png"></NuxtImg>
-			<NuxtImg class="w-6/7 max-w-200" src="mc-under-construction.png"></NuxtImg>
+		<div class="flex flex-col justify-center items-center h-dvh">
+			<div
+				class="flex flex-col space-y-4 w-lg p-6 justify-between rounded-xl"
+				:style="$BGContentImage('minecraft/background.png')"
+			>
+				<NuxtImg
+					class="w-full overflow-hidden object-cover"
+					:src="$ContentImage('minecraft/greasycraft.png')"
+				></NuxtImg>
+				<NuxtLink
+					v-for="file in files"
+					:key="file"
+					:href="downloadURL + file"
+					target="_blank"
+					:style="$BGContentImage('minecraft/button.png')"
+					class="mc-button bg-cover bg-center"
+				>
+					<div class="relative title flex h-10 justify-center items-center">
+						<div
+							class="font-600 h-full flex justify-center w-full items-center text-lg tracking-widest uppercase"
+						>
+							{{ file }}
+						</div>
+						<FontAwesomeIcon
+							:icon="['fas', 'download']"
+							class="size-5 absolute right-2.5"
+						/>
+					</div>
+				</NuxtLink>
+			</div>
 		</div>
 	</main>
 </template>
+<style>
+@font-face {
+	font-family: "Minecraft";
+	src: url("https://cdn.greasygang.co/fonts/minecraft.woff") format("woff");
+}
+.mc-button {
+	font-family: "Minecraft";
+	cursor: pointer;
+	overflow: hidden;
+	white-space: nowrap;
+	user-select: none;
+
+	image-rendering: pixelated;
+	border: 2px solid #000;
+
+	/* Mouse over */
+	&:hover .title {
+		background-color: rgba(100, 100, 255, 0.45);
+		text-shadow: 2px 2px #202013cc;
+		color: #ffffa0;
+	}
+	&:active .title {
+		box-shadow:
+			inset -2px -4px #0004,
+			inset 2px 2px #fff5;
+	}
+
+	/* Button title */
+	.title {
+		color: #ddd;
+		text-shadow: 2px 2px #000a;
+		box-shadow:
+			inset -2px -4px #0006,
+			inset 2px 2px #fff7;
+	}
+}
+.mcbutton {
+	&::before {
+		content: "";
+		position: absolute;
+		background-color: #e75d20;
+		height: 5px;
+		width: 100%;
+		bottom: 100%;
+		left: 0;
+	}
+	&::after {
+		content: "";
+		position: absolute;
+		background-color: #9b3101;
+		height: 5px;
+		width: 100%;
+		top: 100%;
+		left: 0;
+	}
+	span::before {
+		content: "";
+		position: absolute;
+		background-color: #9b3101;
+		height: 100%;
+		width: 4px;
+		left: 100%;
+		top: 0;
+	}
+	span::after {
+		content: "";
+		position: absolute;
+		background-color: #9b3101;
+		height: 100%;
+		width: 4px;
+		top: 0;
+		right: 100%;
+	}
+}
+</style>

plugins/content.ts

@@ -5,6 +5,13 @@ export default defineNuxtPlugin(() => {
 		provide: {
 			ContentImage: (path: string) =>
 				`${config.apiBase}/image/${config.branch}/website/images/${path}`,
+			BGContentImage: (path: string, width?: number, height?: number) => {
+				const img = useImage();
+				const { $ContentImage } = useNuxtApp();
+
+				const imgUrl = img($ContentImage(path), { width, height });
+				return { backgroundImage: `url('${imgUrl}')` };
+			},
 		},
 	};
 });

plugins/fontawesome.ts

@@ -1,6 +1,6 @@
 import { library, config } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { faDollarSign } from "@fortawesome/free-solid-svg-icons";
+import { faDollarSign, faDownload } from "@fortawesome/free-solid-svg-icons";
 import {
 	faDiscord,
 	faTwitch,
@@ -13,6 +13,7 @@ import {
 config.autoAddCss = false;
 
 library.add(
+	faDownload,
 	faDollarSign,
 	faDiscord,
 	faTwitch,