refactor: updated locale structure, moved layout info from locales to vue component files

apps/vdn-static/src/pages/resources.vue

@@ -1,9 +1,51 @@
 <script setup lang="ts">
-import LearningResourceWrapper from "@/components/molecules/LearningResourceWrapper.vue";
+import LearningResourceWrapper, {
+	type ResourceButton,
+} from "@/components/molecules/LearningResourceWrapper.vue";
 import { useLocale } from "@/i18n";
-import { localizeLayout } from "@/utils/localizeLayout";
+import type { Locale } from "@/i18n/locale";
+import { ignore } from "@/utils/ignore";
+import { computed } from "vue";
 
 const locale = useLocale();
+
+const resourceIdToResource = computed(() => locale.value.resources.resources);
+
+const RESOURCE_ORDER = [
+	"discord",
+] as const satisfies (keyof Locale["resources"]["resources"])[];
+
+const resources = computed(() =>
+	RESOURCE_ORDER.map((id) => [id, resourceIdToResource.value[id]] as const),
+);
+
+const computeButtons = (
+	id: keyof Locale["resources"]["resources"],
+): ResourceButton[] => {
+	// will warn us if a new variant is added that isn't handled, and so we should add a switch
+	// once we have a switch statement, this won't be needed as that will check for exhaustiveness
+	ignore<"discord">(id);
+
+	const buttons = resourceIdToResource.value[id].buttons;
+	return [
+		{
+			link: {
+				to: {
+					type: "external",
+					external: "https://discord.viossa.net",
+				},
+				newTab: true,
+			},
+			label: buttons.join.label,
+			style: { color: "primary" },
+		},
+		{
+			link: { to: { type: "internal", internal: "/discord/rules" } },
+			label: buttons.rules.label,
+			style: { color: "warning", outlined: true },
+		},
+	];
+};
 </script>
 
 <template>
@@ -14,19 +56,13 @@ const locale = useLocale();
 
 		<section class="section container">
 			<LearningResourceWrapper
-				v-for="(resource, index) in localizeLayout(
-					locale.resources.layout,
-				)"
+				v-for="([resourceId, resource], index) in resources"
 				:key="index"
 				:title="resource.title"
 				:subtitle="resource.subtitle"
 				:desc="resource.desc"
-				:link="resource.link"
-				:rulesLink="resource.rulesLink"
-				:image="resource.image"
-				:alt="resource.alt"
-				:joinText="resource.joinText"
-				:rulesText="resource.rulesText" />
+				:image="resource.image ?? undefined"
+				:buttons="computeButtons(resourceId)" />
 		</section>
 	</div>
 </template>