feat: minecraft modpack downloads

.github/workflows/CI.yml

@@ -2,8 +2,8 @@ name: Build and Lint
 on: [pull_request]
 
 jobs:
-  test:
-    name: Build and Lint
+  build:
+    name: Build
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
@@ -24,5 +24,24 @@ jobs:
       - name: Build
         run: pnpm build
 
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/[email protected]
+
+      - name: Install Node v20
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
       - name: Lint
-        run: pnpm lint:ci
+        run: pnpm lint:ci

app.vue

@@ -16,11 +16,13 @@ function logout() {
 	cookie.value = null;
 	user.value = null;
 }
-try {
-	user.value = await GqlGetMe();
-} catch {
-	/* empty */
-}
+user.value = await GqlGetMe().catch(() => {});
+const route = useRoute();
+const navs: { name: string; path: string }[] = [
+	{ name: "home", path: "/" },
+	{ name: "minecraft", path: "/minecraft" },
+	{ name: "about", path: "https://greasymac.fandom.com/wiki/GreasyMac_Wiki" },
+];
 </script>
 <template>
 	<div>
@@ -33,22 +35,22 @@ try {
 			<NuxtImg src="/gg.png" class="size-11"></NuxtImg>
 			<div class="flex gap-x-3">
 				<NuxtLink
-					href="/"
-					class="text-white hover:text-gray-100 text-xl underline underline-offset-6"
-					>Home</NuxtLink
-				>
-				<NuxtLink
-					href="https://greasymac.fandom.com/wiki/GreasyMac_Wiki"
-					external
-					target="_blank"
-					class="text-white text-xl hover:text-gray-100"
-					>About</NuxtLink
+					v-for="nav in navs"
+					:key="nav.path"
+					:href="nav.path"
+					:class="{ underline: nav.path === route.fullPath }"
+					class="text-white hover:text-gray-100 text-xl underline-offset-6"
+					>{{ nav.name }}</NuxtLink
 				>
 			</div>
 			<div class="flex my-auto">
 				<NuxtLink
 					v-if="!user"
-					:href="config.apiBase + '/login/twitch?scopes=user:read:email&redirect=' + $route.fullPath"
+					:href="
+						config.apiBase +
+						'/login/twitch?scopes=user:read:email&redirect=' +
+						$route.fullPath
+					"
 					class="bg-#ff4040 hover:bg-#e03a3a text-white hover:text-gray-100 h-min px-5 py-1 rounded-lg text-white"
 					>Login</NuxtLink
 				>

nuxt.config.ts

@@ -19,13 +19,13 @@ export default defineNuxtConfig({
 		],
 	},
 	modules: [
-        "@unocss/nuxt",
-        "@nuxtjs/google-fonts",
-        "@nuxt/image",
-        "nuxt-graphql-client",
-        "notivue/nuxt",
-        "nuxt-build-cache"
-    ],
+		"@unocss/nuxt",
+		"@nuxtjs/google-fonts",
+		"@nuxt/image",
+		"nuxt-graphql-client",
+		"notivue/nuxt",
+		"nuxt-build-cache",
+	],
 	notivue: { limit: 4, enqueue: true, position: "bottom-right" },
 	googleFonts: {
 		families: { "IBM Plex Sans": true, "Bebas Neue": true, Poppins: true },
@@ -61,4 +61,4 @@ export default defineNuxtConfig({
 			"2xl": 1536,
 		},
 	},
-});
+});

pages/content/[...slug].vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { number, z, ZodBoolean, ZodError, ZodString } from "zod";
+import { z, ZodBoolean, ZodError, ZodString } from "zod";
 import { push } from "notivue";
-import { GqlSetContent } from "#gql";
 const errorRef = ref<{ [key: string]: string }>({});
 const responseRef = ref("");
 

pages/index.vue

@@ -57,7 +57,10 @@ try {
 	<main
 		class="font-poppins text-white mx-5 flex min-h-screen justify-center items-center"
 	>
-	<NuxtImg class="absolute -z-100 size-full op-80 overflow-hidden object-cover" src="GoopBGTransparent.png"></NuxtImg>
+		<NuxtImg
+			class="absolute -z-100 size-full op-80 overflow-hidden object-cover"
+			src="GoopBGTransparent.png"
+		></NuxtImg>
 		<div class="pt-20 pb-10 grid lg:grid-cols-2 gap-5 max-w-7xl">
 			<div
 				:class="{ 'h-3xl': sponsor?.enabled, 'lt-lg:h-lg': !sponsor?.enabled }"

pages/minecraft.vue

@@ -1,12 +1,117 @@
+<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"
+					: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,