feat: add instructions accordion to /minecraft

components/accordion.vue

@@ -0,0 +1,44 @@
+<script setup>
+  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { ref } from 'vue';
+
+  const props = defineProps({
+    title: { type: String, required: true },
+    ariaTitle: { type: String, required: true }
+  });
+
+  const showPanel = ref(false);
+  const togglePanel = (event) => {
+    showPanel.value = !showPanel.value;
+  }
+</script>
+
+<template>
+  <div class="border-2 rounded-lg">
+    <button
+      :arial-controls="'accordion-content-' + ariaTitle"
+      :id="'accordion-control-' + ariaTitle"
+      @click.prevent="togglePanel"
+      class="font-poppins py-4 w-full font-medium text-gray-500 flex flex-row items-center justify-between bg-transparent border-solid border-t-2 border-b-0 border-x-0 border-gray-100">
+      {{ title }}
+      <FontAwesomeIcon
+        v-if="showPanel" 
+        class="rotate-180"
+        :icon="['fas', 'chevron-down']"
+        />
+    <FontAwesomeIcon
+        v-else
+        :icon="['fas', 'chevron-down']"
+    />
+    </button>
+    <Transition>
+    <div
+      :aria-hidden="!showPanel"
+      :id="'content-' + ariaTitle"
+      class="p-4"
+      v-if="showPanel">
+      <slot></slot>
+    </div>
+    </Transition>
+  </div>
+</template>

pages/minecraft.vue

@@ -1,7 +1,24 @@
 <script setup lang="ts">
+import Accordion from "@/components/accordion.vue";
+
 const downloadURL = "https://cdn.greasygang.co/greasycraft/";
-const files = ["curseforge.zip", "prism.zip", "modrinth.mrpack	"];
+const files = ["curseforge.zip", "prism.zip" ];
+
+const isAccordionOpen = ref(false);
 </script>
+
+<style>
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>
+
 <template>
 	<main>
 		<NuxtImg
@@ -37,7 +54,71 @@ const files = ["curseforge.zip", "prism.zip", "modrinth.mrpack	"];
 					</div>
 				</NuxtLink>
 			</div>
+			<div class="m-2" v-on:click="isAccordionOpen = true">
+				<button class="font-bebas bg-#ff4040 hover:bg-#e03a3a text-white hover:text-gray-100 h-min px-5 py-1 rounded-lg text-white text-lg"
+				>Instructions</button>
+			</div>
+		</div>
+
+		<Transition>
+		<div class="font-poppins relative z-10 transition-all" v-if="isAccordionOpen">
+			<div class="fixed inset-0 bg-gray-900 bg-opacity-50 transition-opacity"></div>
+
+			<div class="fixed inset-0 flex items-center justify-center">
+				<div
+					class="bg-white p-6 rounded-lg lg:w-2/6 md:w-1/2 w-full md:mx-0 mx-4"
+					aria-labelledby="modal-title"
+					role="dialog"
+					aria-modal="true"
+				>
+					<div class="flex justify-between items-center">
+						<h2 class="text-lg font-medium text-gray-900" id="modal-title">
+							Instructions
+						</h2>
+						<button
+							class="text-gray-400 hover:text-gray-500 bg-transparent"
+						>
+							<FontAwesomeIcon :icon="['fas', 'xmark']" class="h-4 w-4" v-on:click="isAccordionOpen = false" />
+						</button>
+					</div>
+					<div class="mt-4 text-sm text-gray-500">
+						<p>
+							Currently, we are supporting 2 modpack launchers, those being <a class="text-gray-500 hover:text-gray-600 underline" href="https://prismlauncher.org/">Prism</a> and <a class="text-gray-500 hover:text-gray-600 underline" href="https://www.curseforge.com/">CurseForge</a>.
+
+						</p><br>
+						<div class="border-solid border-y-0 border-r-0 border-l-2 border-yellow-400 px-2 py-1">
+							<p class="text-yellow-400 mb-1">⚠️ Warning</p>
+							We personally recommend you to use <a class="text-gray-500 hover:text-gray-600 underline" href="https://prismlauncher.org/">Prism</a>, though it is completely up to you. If you choose to use another modpack launcher, or to manually install it, we will only be able to give limited support.
+						</div>
+
+						<div class="my-4">
+							<Accordion title="Prism" ariaTitle="prism">
+							<p>
+								1. Download and install Prism from <a class="text-gray-500 hover:text-gray-600 underline" href="https://prismlauncher.org">prismlauncher.org</a><br>
+								2. Log in to Prism with your Microsoft account.<br>
+								3. Drag and drop the downloaded ZIP file <a class="text-blue-500 hover:text-blue-600" href="https://cdn.greasygang.co/greasycraft/prism.zip">(Prism.zip)</a> onto the main window.<br>
+								4. Launch the modpack by double clicking the GreasyCraft icon or clicking the GreasyCraft icon and then pressing Launch on the right sidebar.
+							</p>
+							</Accordion>
+							<Accordion title="CurseForge" ariaTitle="curseforge">
+								<p>
+									1. Download and install Curseforge from <a class="text-gray-500 hover:text-gray-600 underline" href="https://www.curseforge.com">curseforge.com</a><br>
+									2. Click "Minecraft" (it may need to install)<br>
+									3. In the Minecraft tab, click Create Custom Profile in the top right.<br>
+									4. Click "Import"<br>
+									5. Browse to the downloaded file <a class="text-blue-500 hover:text-blue-600" href="https://cdn.greasygang.co/greasycraft/curseforge.zip">(CurseForge.zip)</a><br>
+									6. After it's done initializing, launch the modpack.<br>
+									7. Log into the Minecraft launcher with your Microsoft account if it isn't already<br>
+									8. Click Play.
+								</p>
+							</Accordion>
+						</div>
+
+					</div>
+				</div>
+			</div>
 		</div>
+		</Transition>
 	</main>
 </template>
 <style>

plugins/fontawesome.ts

@@ -1,6 +1,6 @@
 import { library, config } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { faDollarSign, faDownload } from "@fortawesome/free-solid-svg-icons";
+import { faDollarSign, faDownload, faXmark, faChevronDown } from "@fortawesome/free-solid-svg-icons";
 import {
 	faDiscord,
 	faTwitch,
@@ -20,7 +20,9 @@ library.add(
 	faYoutube,
 	faTiktok,
 	faTwitter,
-	faSpotify
+	faSpotify,
+	faXmark,
+	faChevronDown
 );
 
 export default defineNuxtPlugin(nuxtApp => {