From 032cfb2bfdf00d47078fbb04216a84657e2e65a0 Mon Sep 17 00:00:00 2001
From: Benjamin Singleton <19498453+tetrogem@users.noreply.github.com>
Date: Sat, 14 Jun 2025 11:57:28 -0500
Subject: [PATCH 1/5] feat: implemented new i18n system

---
 apps/vdn-static/src/App.vue                   |  2 +
 .../src/components/organisms/LocalePicker.vue | 43 ++++++++++
 .../src/components/pages/HomePage.vue         | 28 ++-----
 .../src/components/pages/ResourcesPage.vue    | 24 +-----
 apps/vdn-static/src/i18n/index.ts             | 61 +++++++++++---
 apps/vdn-static/src/i18n/locale.ts            | 39 +++++++++
 apps/vdn-static/src/i18n/types.ts             |  8 --
 apps/vdn-static/src/locales/en_US.ts          | 74 ++++++++++-------
 apps/vdn-static/src/locales/vp_VL.ts          | 80 ++++++++++++-------
 apps/vdn-static/src/main.ts                   |  3 +-
 apps/vdn-static/src/utils/localizeLayout.ts   | 16 ++++
 11 files changed, 254 insertions(+), 124 deletions(-)
 create mode 100644 apps/vdn-static/src/components/organisms/LocalePicker.vue
 create mode 100644 apps/vdn-static/src/i18n/locale.ts
 delete mode 100644 apps/vdn-static/src/i18n/types.ts
 create mode 100644 apps/vdn-static/src/utils/localizeLayout.ts

diff --git a/apps/vdn-static/src/App.vue b/apps/vdn-static/src/App.vue
index 371ef2a..6fedc9b 100644
--- a/apps/vdn-static/src/App.vue
+++ b/apps/vdn-static/src/App.vue
@@ -2,6 +2,7 @@
 import "./assets/style.scss";
 import { ref, type Ref } from "vue";
 import { SAMPLE } from "@repo/common/sample";
+import LocalePicker from "./components/organisms/LocalePicker.vue";
 
 const burgerOpen: Ref<boolean> = ref<boolean>(false);
 
@@ -45,6 +46,7 @@ const toggleBurger = (): void => {
 					<RouterLink class="navbar-item" to="/resources">{{
 						SAMPLE
 					}}</RouterLink>
+					<LocalePicker />
 				</div>
 			</div>
 		</nav>
diff --git a/apps/vdn-static/src/components/organisms/LocalePicker.vue b/apps/vdn-static/src/components/organisms/LocalePicker.vue
new file mode 100644
index 0000000..d6d5aa6
--- /dev/null
+++ b/apps/vdn-static/src/components/organisms/LocalePicker.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { LOCALE_IDS, localeId, useLocale, type LocaleId } from "@/i18n";
+import { ref } from "vue";
+
+const isOpen = ref<boolean>(false);
+
+const toggleOpen = (): void => {
+	isOpen.value = !isOpen.value;
+};
+
+const setLocaleId = (id: LocaleId): void => {
+	localeId.value = id;
+};
+</script>
+
+<template>
+	<div :class="['dropdown', isOpen && 'is-active']">
+		<div class="dropdown-trigger">
+			<button
+				class="button"
+				aria-haspopup="true"
+				aria-controls="dropdown-menu"
+				@click="toggleOpen()">
+				<span>{{ useLocale().value.localeName }}</span>
+				<span class="icon is-small">
+					<i class="fas fa-angle-down" aria-hidden="true"></i>
+				</span>
+			</button>
+		</div>
+		<div class="dropdown-menu" id="dropdown-menu" role="menu">
+			<div class="dropdown-content">
+				<a
+					v-for="(id, index) in LOCALE_IDS"
+					:key="index"
+					href="#"
+					:class="['dropdown-item', localeId === id && 'is-active']"
+					@click="setLocaleId(id)">
+					{{ useLocale({ locale: id }).value.localeName }}
+				</a>
+			</div>
+		</div>
+	</div>
+</template>
diff --git a/apps/vdn-static/src/components/pages/HomePage.vue b/apps/vdn-static/src/components/pages/HomePage.vue
index ff642d6..6c4cac9 100644
--- a/apps/vdn-static/src/components/pages/HomePage.vue
+++ b/apps/vdn-static/src/components/pages/HomePage.vue
@@ -1,25 +1,9 @@
 <script setup lang="ts">
 import HomeSectionWrapper from "@/components/molecules/HomeSectionWrapper.vue";
-import "@/assets/style.scss";
-import { useI18n } from "vue-i18n";
-import type { MessageSchema } from "@/i18n/types";
-import { computed } from "vue";
+import { useLocale } from "@/i18n";
+import { localizeLayout } from "@/utils/localizeLayout";
 
-const { tm } = useI18n();
-const sectionList = computed<MessageSchema["sections"]>(() => tm("sections"));
-const sectionsWithImages = computed(() =>
-	sectionList.value.map((section) => {
-		if (!section.image) return section;
-
-		return {
-			...section,
-			image: new URL(`../../assets/${section.image}`, import.meta.url)
-				.href,
-		};
-	}),
-);
-
-console.log(sectionList.value);
+const locale = useLocale();
 </script>
 
 <template>
@@ -35,12 +19,12 @@ console.log(sectionList.value);
 
 		<section class="section container">
 			<HomeSectionWrapper
-				v-for="(section, index) in sectionsWithImages"
+				v-for="(section, index) in localizeLayout(locale.home)"
 				:key="index"
 				:title="section.title"
 				:text="section.text"
-				:image="section.image"
-				:alt="section.alt"
+				:image="section.image ?? undefined"
+				:alt="section.alt ?? undefined"
 				:reverse="index % 2 !== 0" />
 		</section>
 	</div>
diff --git a/apps/vdn-static/src/components/pages/ResourcesPage.vue b/apps/vdn-static/src/components/pages/ResourcesPage.vue
index 0d4e8f9..ddcbaba 100644
--- a/apps/vdn-static/src/components/pages/ResourcesPage.vue
+++ b/apps/vdn-static/src/components/pages/ResourcesPage.vue
@@ -1,25 +1,9 @@
 <script setup lang="ts">
 import LearningResourceWrapper from "@/components/molecules/LearningResourceWrapper.vue";
-import "@/assets/style.scss";
-import { useI18n } from "vue-i18n";
-import type { MessageSchema } from "@/i18n/types";
-import { computed } from "vue";
+import { useLocale } from "@/i18n";
+import { localizeLayout } from "@/utils/localizeLayout";
 
-const { tm } = useI18n();
-const resourceList = computed<MessageSchema["resources"]>(() =>
-	tm("resources"),
-);
-const resourcesWithImages = computed(() =>
-	resourceList.value.map((resource) => {
-		if (!resource.image) return resource;
-
-		return {
-			...resource,
-			image: new URL(`../../assets/${resource.image}`, import.meta.url)
-				.href,
-		};
-	}),
-);
+const locale = useLocale();
 </script>
 
 <template>
@@ -30,7 +14,7 @@ const resourcesWithImages = computed(() =>
 
 		<section class="section container">
 			<LearningResourceWrapper
-				v-for="(resource, index) in resourcesWithImages"
+				v-for="(resource, index) in localizeLayout(locale.resources)"
 				:key="index"
 				:title="resource.title"
 				:subtitle="resource.subtitle"
diff --git a/apps/vdn-static/src/i18n/index.ts b/apps/vdn-static/src/i18n/index.ts
index c474d89..5aed7c7 100644
--- a/apps/vdn-static/src/i18n/index.ts
+++ b/apps/vdn-static/src/i18n/index.ts
@@ -1,17 +1,56 @@
-import { createI18n } from "vue-i18n";
 import en_US from "../locales/en_US";
 import vp_VL from "../locales/vp_VL";
-import type { MessageSchema } from "./types";
+import { computed, reactive, readonly, ref } from "vue";
+import type { Locale } from "./locale";
 
-const locales = { en_US, vp_VL } as const;
+export const LOCALE_IDS = ["en_US", "vp_VL"] as const;
+export type LocaleId = (typeof LOCALE_IDS)[number];
 
-export type Locale = keyof typeof locales;
+const locales = { en_US, vp_VL } as const satisfies Record<LocaleId, Locale>;
 
-const i18n = createI18n<[MessageSchema], Locale>({
-	legacy: false,
-	locale: "en_US" satisfies Locale,
-	fallbackLocale: "en_US" satisfies Locale,
-	messages: locales,
-});
+export const localeId = ref<LocaleId>("en_US");
 
-export default i18n;
+export function useLocale(opt: UseLocaleOptions = {}) {
+	const locale = computed<Locale>(() => {
+		return fallbackProxy(
+			locales[opt.locale ?? localeId.value],
+			locales["en_US"],
+		);
+	});
+
+	return readonly(reactive(locale));
+}
+
+export interface UseLocaleOptions {
+	locale?: LocaleId;
+}
+
+function fallbackProxy(obj: any, fallback: any) {
+	return new Proxy(obj, {
+		get: (target, key) => {
+			const value = target[key];
+			const fallbackValue = fallback[key];
+			if (value === undefined) {
+				return fallbackValue;
+			}
+
+			if (value === null && fallbackValue !== null) {
+				return fallbackValue;
+			}
+
+			if (
+				value === null
+				|| fallbackValue === null
+				|| typeof value !== "object"
+				|| typeof fallbackValue !== "object"
+			) {
+				return value;
+			}
+
+			return fallbackProxy(value, fallbackValue);
+		},
+		set: () => {
+			throw new Error("Cannot mutate locale at runtime");
+		},
+	});
+}
diff --git a/apps/vdn-static/src/i18n/locale.ts b/apps/vdn-static/src/i18n/locale.ts
new file mode 100644
index 0000000..57bbcf3
--- /dev/null
+++ b/apps/vdn-static/src/i18n/locale.ts
@@ -0,0 +1,39 @@
+export interface Locale {
+	localeName: string;
+	home: Layout<HomeSections>;
+	resources: Layout<Resources>;
+}
+
+export interface Layout<T> {
+	layout: (keyof T)[];
+	data: { [K in keyof T]: T[K] | null };
+}
+
+export interface HomeSections {
+	whatIsViossa: HomeSection;
+	historyOfViossa: HomeSection;
+	community: HomeSection;
+}
+
+export interface HomeSection {
+	title: string;
+	text: string;
+	image: string | null;
+	alt: string | null;
+}
+
+export interface Resources {
+	discord: Resource;
+}
+
+export interface Resource {
+	title: string;
+	subtitle: string;
+	desc: string;
+	link: string;
+	rulesLink: string;
+	image: string;
+	alt: string;
+	joinText: string;
+	rulesText: string;
+}
diff --git a/apps/vdn-static/src/i18n/types.ts b/apps/vdn-static/src/i18n/types.ts
deleted file mode 100644
index b44745d..0000000
--- a/apps/vdn-static/src/i18n/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import en_US from "../locales/en_US";
-export interface MessageSchema extends Broaden<typeof en_US> {}
-
-type Broaden<T> = {
-	[K in keyof T]: T[K] extends object ? Broaden<T[K]>
-	: T[K] extends string ? string
-	: T[K];
-} & {};
diff --git a/apps/vdn-static/src/locales/en_US.ts b/apps/vdn-static/src/locales/en_US.ts
index aebbd8f..5a1afdb 100644
--- a/apps/vdn-static/src/locales/en_US.ts
+++ b/apps/vdn-static/src/locales/en_US.ts
@@ -1,33 +1,47 @@
+import type { Locale } from "@/i18n/locale";
+import flakkaImg from "@/assets/flakka.png";
+import discordImg from "@/assets/discord.png";
+
 export default {
-	sections: [
-		{
-			title: "What is Viossa?",
-			text: "Viossa is a community-created artificial pidgin language, created to simulate the formation of natural pidgin languages. Viossa is characterized by its lack of standardization, with each speaker developing a personal idiolect. Spelling and pronunciation can vary greatly, and serve as a form of personal self-expression. Viossa is learnt and taught entirely by immersion — translation is prohibited while learning.",
-			image: "flakka.png",
-			alt: "Flag of the Viossa Language",
+	localeName: "English",
+	home: {
+		layout: ["whatIsViossa", "historyOfViossa", "community"],
+		data: {
+			whatIsViossa: {
+				title: "What is Viossa?",
+				text: "Viossa is a community-created artificial pidgin language, created to simulate the formation of natural pidgin languages. Viossa is characterized by its lack of standardization, with each speaker developing a personal idiolect. Spelling and pronunciation can vary greatly, and serve as a form of personal self-expression. Viossa is learnt and taught entirely by immersion — translation is prohibited while learning.",
+				image: flakkaImg,
+				alt: "Flag of the Viossa Language",
+			},
+			historyOfViossa: {
+				title: "History of Viossa",
+				text: "Viossa began as a Skype group in 2014, created by members of the r/conlangs community on Reddit, as an experiment to simulate the formation of a pidgin language. Pidgins are simplified languages resulting from contact between populations with no shared common language. Unlike most pidgins, which usually have two to three contributor languages, Viossa comes from many diverse languages. This is because people from all around the world helped to contribute to Viossa's vocabulary.",
+				image: flakkaImg,
+				alt: "Flag of the Viossa Language",
+			},
+			community: {
+				title: "Community",
+				text: "The Viossa community is rich and colourful, drawing from many global traditions due to its worldwide online membership. Since the teaching culture puts an emphasis on linguistic immersion, and discourages prescriptivism, the culture of Viossa is as diverse and varied as the language and the people who speak it. For many, their personal dialect is a key form of identity and expression. The fluid nature of Viossa and lack of defined meanings makes Viossa popular for creative purposes, such as poetry and songwriting.",
+				image: null,
+				alt: null,
+			},
 		},
-		{
-			title: "History of Viossa",
-			text: "Viossa began as a Skype group in 2014, created by members of the r/conlangs community on Reddit, as an experiment to simulate the formation of a pidgin language. Pidgins are simplified languages resulting from contact between populations with no shared common language. Unlike most pidgins, which usually have two to three contributor languages, Viossa comes from many diverse languages. This is because people from all around the world helped to contribute to Viossa's vocabulary.",
-			image: "flakka.png",
-			alt: "Flag of the Viossa Language",
+	},
+	resources: {
+		layout: ["discord"],
+		data: {
+			discord: {
+				title: "Discord Server",
+				subtitle:
+					"This is where most of the action happens! Hop on in!",
+				desc: "Originally started in 2015 something something read the rules here, then click the link below to join!",
+				link: "https://discord.gg/g3mG2gYjZD",
+				rulesLink: "https://viossadiskordserver.github.io/rules",
+				image: discordImg,
+				alt: "Discord logo",
+				joinText: "Join",
+				rulesText: "Rules",
+			},
 		},
-		{
-			title: "Community",
-			text: "The Viossa community is rich and colourful, drawing from many global traditions due to its worldwide online membership. Since the teaching culture puts an emphasis on linguistic immersion, and discourages prescriptivism, the culture of Viossa is as diverse and varied as the language and the people who speak it. For many, their personal dialect is a key form of identity and expression. The fluid nature of Viossa and lack of defined meanings makes Viossa popular for creative purposes, such as poetry and songwriting.",
-		},
-	],
-	resources: [
-		{
-			title: "Discord Server",
-			subtitle: "This is where most of the action happens! Hop on in!",
-			desc: "Originally started in 2015 something something read the rules here, then click the link below to join!",
-			link: "https://discord.gg/g3mG2gYjZD",
-			rulesLink: "https://viossadiskordserver.github.io/rules",
-			image: "discord.png",
-			alt: "Discord logo",
-			joinText: "Join",
-			rulesText: "Rules",
-		},
-	],
-};
+	},
+} as const satisfies Locale;
diff --git a/apps/vdn-static/src/locales/vp_VL.ts b/apps/vdn-static/src/locales/vp_VL.ts
index 3d74f48..bdfee06 100644
--- a/apps/vdn-static/src/locales/vp_VL.ts
+++ b/apps/vdn-static/src/locales/vp_VL.ts
@@ -1,35 +1,53 @@
-import type { MessageSchema } from "@/i18n/types";
+import type { Locale } from "@/i18n/locale";
+import flakkaImg from "@/assets/flakka.png";
+import discordImg from "@/assets/discord.png";
 
 export default {
-	sections: [
-		{
-			title: "Kafaen afto Viossa",
-			text: "Viossa tte glossa mahena grun vi nai vil fshtojena na bakadjin, grun vi svinnur ja! De aldjin zovti lera ne",
-			image: "flakka.png",
-			alt: "Flag of the Viossa Language",
+	localeName: "Viossa",
+	home: {
+		layout: [
+			"whatIsViossa",
+			"community",
+			"historyOfViossa",
+			"community",
+			"community",
+		],
+		data: {
+			whatIsViossa: {
+				title: "Kafaen afto Viossa",
+				text: "Viossa tte glossa mahena grun vi nai vil fshtojena na bakadjin, grun vi svinnur ja! De aldjin zovti lera ne",
+				image: flakkaImg,
+				alt: "Flag of the Viossa Language",
+			},
+			historyOfViossa: {
+				title: "History of Viossa",
+				text: "Viossa began as a Skype group in 2014, created by members of the r/conlangs community on Reddit, as an experiment to simulate the formation of a pidgin language. Pidgins are simplified languages resulting from contact between populations with no shared common language. Unlike most pidgins, which usually have two to three contributor languages, Viossa comes from many diverse languages. This is because people from all around the world helped to contribute to Viossa's vocabulary.",
+				image: flakkaImg,
+				alt: "Flag of the Viossa Language",
+			},
+			community: {
+				title: "Community",
+				text: "The Viossa community is rich and colourful, drawing from many global traditions due to its worldwide online membership. Since the teaching culture puts an emphasis on linguistic immersion, and discourages prescriptivism, the culture of Viossa is as diverse and varied as the language and the people who speak it. For many, their personal dialect is a key form of identity and expression. The fluid nature of Viossa and lack of defined meanings makes Viossa popular for creative purposes, such as poetry and songwriting.",
+				image: null,
+				alt: null,
+			},
 		},
-		{
-			title: "History of Viossa",
-			text: "Viossa began as a Skype group in 2014, created by members of the r/conlangs community on Reddit, as an experiment to simulate the formation of a pidgin language. Pidgins are simplified languages resulting from contact between populations with no shared common language. Unlike most pidgins, which usually have two to three contributor languages, Viossa comes from many diverse languages. This is because people from all around the world helped to contribute to Viossa's vocabulary.",
-			image: "flakka.png",
-			alt: "Flag of the Viossa Language",
+	},
+	resources: {
+		layout: ["discord"],
+		data: {
+			discord: {
+				title: "Discord Server",
+				subtitle:
+					"This is where most of the action happens! Hop on in!",
+				desc: "Originally started in 2015 something something read the rules here, then click the link below to join!",
+				link: "https://discord.gg/g3mG2gYjZD",
+				rulesLink: "https://viossadiskordserver.github.io/rules",
+				image: discordImg,
+				alt: "Discord logo",
+				joinText: "Join",
+				rulesText: "Rules",
+			},
 		},
-		{
-			title: "Community",
-			text: "The Viossa community is rich and colourful, drawing from many global traditions due to its worldwide online membership. Since the teaching culture puts an emphasis on linguistic immersion, and discourages prescriptivism, the culture of Viossa is as diverse and varied as the language and the people who speak it. For many, their personal dialect is a key form of identity and expression. The fluid nature of Viossa and lack of defined meanings makes Viossa popular for creative purposes, such as poetry and songwriting.",
-		},
-	],
-	resources: [
-		{
-			title: "Discord Server",
-			subtitle: "This is where most of the action happens! Hop on in!",
-			desc: "Originally started in 2015 something something read the rules here, then click the link below to join!",
-			link: "https://discord.gg/g3mG2gYjZD",
-			rulesLink: "https://viossadiskordserver.github.io/rules",
-			image: "discord.png",
-			alt: "Discord logo",
-			joinText: "Join",
-			rulesText: "Rules",
-		},
-	],
-} as const satisfies MessageSchema;
+	},
+} as const satisfies Locale;
diff --git a/apps/vdn-static/src/main.ts b/apps/vdn-static/src/main.ts
index b032147..66cde5b 100644
--- a/apps/vdn-static/src/main.ts
+++ b/apps/vdn-static/src/main.ts
@@ -1,6 +1,5 @@
 import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./routes";
-import i18n from "./i18n";
 
-createApp(App).use(i18n).use(router).mount("#app");
+createApp(App).use(router).mount("#app");
diff --git a/apps/vdn-static/src/utils/localizeLayout.ts b/apps/vdn-static/src/utils/localizeLayout.ts
new file mode 100644
index 0000000..ca2729f
--- /dev/null
+++ b/apps/vdn-static/src/utils/localizeLayout.ts
@@ -0,0 +1,16 @@
+import type { Layout } from "@/i18n/locale";
+import type { DeepReadonly } from "vue";
+
+export function localizeLayout<T>(
+	layout: DeepReadonly<Layout<T>>,
+): T[keyof T][] {
+	const sections: T[keyof T][] = [];
+	for (const sectionId of layout.layout) {
+		const section = (layout.data as T)[sectionId as keyof T];
+		if (section) {
+			sections.push(section);
+		}
+	}
+
+	return sections;
+}

From 3c1a9db3a508c8a3aa0d3c009453243a90c996d3 Mon Sep 17 00:00:00 2001
From: Benjamin Singleton <19498453+tetrogem@users.noreply.github.com>
Date: Sat, 14 Jun 2025 12:07:36 -0500
Subject: [PATCH 2/5] fix: removed unnecessary reactive call

---
 apps/vdn-static/src/i18n/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/vdn-static/src/i18n/index.ts b/apps/vdn-static/src/i18n/index.ts
index 5aed7c7..b83ac78 100644
--- a/apps/vdn-static/src/i18n/index.ts
+++ b/apps/vdn-static/src/i18n/index.ts
@@ -1,6 +1,6 @@
 import en_US from "../locales/en_US";
 import vp_VL from "../locales/vp_VL";
-import { computed, reactive, readonly, ref } from "vue";
+import { computed, readonly, ref } from "vue";
 import type { Locale } from "./locale";
 
 export const LOCALE_IDS = ["en_US", "vp_VL"] as const;
@@ -18,7 +18,7 @@ export function useLocale(opt: UseLocaleOptions = {}) {
 		);
 	});
 
-	return readonly(reactive(locale));
+	return readonly(locale);
 }
 
 export interface UseLocaleOptions {

From 3b74fc00f13aca7869cfffeadaa0093274e8be1e Mon Sep 17 00:00:00 2001
From: Benjamin Singleton <19498453+tetrogem@users.noreply.github.com>
Date: Sat, 14 Jun 2025 12:20:15 -0500
Subject: [PATCH 3/5] feat: locale picker closes if unfocused

---
 .../src/components/organisms/LocalePicker.vue | 28 +++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/apps/vdn-static/src/components/organisms/LocalePicker.vue b/apps/vdn-static/src/components/organisms/LocalePicker.vue
index d6d5aa6..ddbf611 100644
--- a/apps/vdn-static/src/components/organisms/LocalePicker.vue
+++ b/apps/vdn-static/src/components/organisms/LocalePicker.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { LOCALE_IDS, localeId, useLocale, type LocaleId } from "@/i18n";
-import { ref } from "vue";
+import { onMounted, onUnmounted, ref, useTemplateRef } from "vue";
 
 const isOpen = ref<boolean>(false);
+const dropdownRef = useTemplateRef("dropdown");
 
 const toggleOpen = (): void => {
 	isOpen.value = !isOpen.value;
@@ -11,10 +12,33 @@ const toggleOpen = (): void => {
 const setLocaleId = (id: LocaleId): void => {
 	localeId.value = id;
 };
+
+const detectFocus = (e: MouseEvent) => {
+	if (!isOpen) {
+		return;
+	}
+
+	const dropdown = dropdownRef.value;
+	if (!dropdown) {
+		return;
+	}
+
+	const { target } = e;
+	const focused =
+		target instanceof Node
+		&& (dropdown === target || dropdown.contains(target));
+
+	if (!focused) {
+		isOpen.value = false;
+	}
+};
+
+onMounted(() => window.addEventListener("click", detectFocus));
+onUnmounted(() => window.removeEventListener("click", detectFocus));
 </script>
 
 <template>
-	<div :class="['dropdown', isOpen && 'is-active']">
+	<div :class="['dropdown', isOpen && 'is-active']" ref="dropdown">
 		<div class="dropdown-trigger">
 			<button
 				class="button"

From 6ea53dc65213f573529b8b14572e5cf1c1f5519e Mon Sep 17 00:00:00 2001
From: Benjamin Singleton <19498453+tetrogem@users.noreply.github.com>
Date: Sat, 14 Jun 2025 12:38:57 -0500
Subject: [PATCH 4/5] feat: added vueuse for onClickOutside, upgraded
 functionality for hamburger menu and locale picker

---
 apps/vdn-static/package.json                  |  2 +
 apps/vdn-static/src/App.vue                   | 26 +++++++---
 .../src/components/organisms/LocalePicker.vue | 36 ++++----------
 pnpm-lock.yaml                                | 48 +++++++++++++++++++
 4 files changed, 80 insertions(+), 32 deletions(-)

diff --git a/apps/vdn-static/package.json b/apps/vdn-static/package.json
index 599813b..c8f678a 100644
--- a/apps/vdn-static/package.json
+++ b/apps/vdn-static/package.json
@@ -11,6 +11,8 @@
 	"dependencies": {
 		"@tailwindcss/vite": "^4.1.6",
 		"@types/node": "^22.15.17",
+		"@vueuse/components": "^13.3.0",
+		"@vueuse/core": "^13.3.0",
 		"bulma": "^1.0.4",
 		"tailwindcss": "^4.1.6",
 		"vue": "^3.5.13",
diff --git a/apps/vdn-static/src/App.vue b/apps/vdn-static/src/App.vue
index 6fedc9b..3a5d485 100644
--- a/apps/vdn-static/src/App.vue
+++ b/apps/vdn-static/src/App.vue
@@ -3,16 +3,21 @@ import "./assets/style.scss";
 import { ref, type Ref } from "vue";
 import { SAMPLE } from "@repo/common/sample";
 import LocalePicker from "./components/organisms/LocalePicker.vue";
+import { vOnClickOutside } from "@vueuse/components";
 
 const burgerOpen: Ref<boolean> = ref<boolean>(false);
 
 const toggleBurger = (): void => {
 	burgerOpen.value = !burgerOpen.value;
 };
+
+const closeBurger = (): void => {
+	burgerOpen.value = false;
+};
 </script>
 
 <template>
-	<div class="min-h-screen flex flex-col">
+	<div class="min-h-screen flex flex-col" v-on-click-outside="closeBurger">
 		<!-- Main application wrapper -->
 		<nav
 			class="navbar is-fixed-top"
@@ -37,15 +42,24 @@ const toggleBurger = (): void => {
 
 			<div :class="`navbar-menu ${burgerOpen ? 'is-active' : ''}`">
 				<div class="navbar-start">
-					<RouterLink class="navbar-item" to="/"
+					<RouterLink
+						class="navbar-item"
+						to="/"
+						@click="closeBurger()"
 						>What is Viossa?</RouterLink
 					>
-					<RouterLink class="navbar-item" to="/resources"
+					<RouterLink
+						class="navbar-item"
+						to="/resources"
+						@click="closeBurger()"
 						>Resources</RouterLink
 					>
-					<RouterLink class="navbar-item" to="/resources">{{
-						SAMPLE
-					}}</RouterLink>
+					<RouterLink
+						class="navbar-item"
+						to="/resources"
+						@click="closeBurger()"
+						>{{ SAMPLE }}</RouterLink
+					>
 					<LocalePicker />
 				</div>
 			</div>
diff --git a/apps/vdn-static/src/components/organisms/LocalePicker.vue b/apps/vdn-static/src/components/organisms/LocalePicker.vue
index ddbf611..c922d0b 100644
--- a/apps/vdn-static/src/components/organisms/LocalePicker.vue
+++ b/apps/vdn-static/src/components/organisms/LocalePicker.vue
@@ -1,44 +1,28 @@
 <script setup lang="ts">
 import { LOCALE_IDS, localeId, useLocale, type LocaleId } from "@/i18n";
-import { onMounted, onUnmounted, ref, useTemplateRef } from "vue";
+import { ref } from "vue";
+import { vOnClickOutside } from "@vueuse/components";
 
 const isOpen = ref<boolean>(false);
-const dropdownRef = useTemplateRef("dropdown");
 
 const toggleOpen = (): void => {
 	isOpen.value = !isOpen.value;
 };
 
+const close = (): void => {
+	isOpen.value = false;
+};
+
 const setLocaleId = (id: LocaleId): void => {
 	localeId.value = id;
+	close();
 };
-
-const detectFocus = (e: MouseEvent) => {
-	if (!isOpen) {
-		return;
-	}
-
-	const dropdown = dropdownRef.value;
-	if (!dropdown) {
-		return;
-	}
-
-	const { target } = e;
-	const focused =
-		target instanceof Node
-		&& (dropdown === target || dropdown.contains(target));
-
-	if (!focused) {
-		isOpen.value = false;
-	}
-};
-
-onMounted(() => window.addEventListener("click", detectFocus));
-onUnmounted(() => window.removeEventListener("click", detectFocus));
 </script>
 
 <template>
-	<div :class="['dropdown', isOpen && 'is-active']" ref="dropdown">
+	<div
+		:class="['dropdown', isOpen && 'is-active']"
+		v-on-click-outside="close">
 		<div class="dropdown-trigger">
 			<button
 				class="button"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d85e9a6..d122c89 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -36,6 +36,12 @@ importers:
       '@types/node':
         specifier: ^22.15.17
         version: 22.15.31
+      '@vueuse/components':
+        specifier: ^13.3.0
+        version: 13.3.0(vue@3.5.16(typescript@5.8.3))
+      '@vueuse/core':
+        specifier: ^13.3.0
+        version: 13.3.0(vue@3.5.16(typescript@5.8.3))
       bulma:
         specifier: ^1.0.4
         version: 1.0.4
@@ -693,6 +699,9 @@ packages:
   '@types/serve-static@1.15.8':
     resolution: {integrity: sha512-roei0UY3LhpOJvjbIP6ZZFngyLKl5dskOtDhxY5THRSpO+ZI+nzJ+m5yUMzGrp89YRa7lvknKkMYjqQFGwA7Sg==}
 
+  '@types/web-bluetooth@0.0.21':
+    resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
+
   '@typescript-eslint/eslint-plugin@8.34.0':
     resolution: {integrity: sha512-QXwAlHlbcAwNlEEMKQS2RCgJsgXrTJdjXT08xEgbPFa2yYQgVjBymxP5DrfrE7X7iodSzd9qBUHUycdyVJTW1w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -831,6 +840,24 @@ packages:
       vue:
         optional: true
 
+  '@vueuse/components@13.3.0':
+    resolution: {integrity: sha512-ZnJiVknPtlWyeE4qwIXkDOlHM3W4bgMCxgeXj1Dec/aF/+8N+yAj+7rRdRUWUnqr8uKRin368RjG1FPKsF2erA==}
+    peerDependencies:
+      vue: ^3.5.0
+
+  '@vueuse/core@13.3.0':
+    resolution: {integrity: sha512-uYRz5oEfebHCoRhK4moXFM3NSCd5vu2XMLOq/Riz5FdqZMy2RvBtazdtL3gEcmDyqkztDe9ZP/zymObMIbiYSg==}
+    peerDependencies:
+      vue: ^3.5.0
+
+  '@vueuse/metadata@13.3.0':
+    resolution: {integrity: sha512-42IzJIOYCKIb0Yjv1JfaKpx8JlCiTmtCWrPxt7Ja6Wzoq0h79+YVXmBV03N966KEmDEESTbp5R/qO3AB5BDnGw==}
+
+  '@vueuse/shared@13.3.0':
+    resolution: {integrity: sha512-L1QKsF0Eg9tiZSFXTgodYnu0Rsa2P0En2LuLrIs/jgrkyiDuJSsPZK+tx+wU0mMsYHUYEjNsuE41uqqkuR8VhA==}
+    peerDependencies:
+      vue: ^3.5.0
+
   accepts@2.0.0:
     resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
     engines: {node: '>= 0.6'}
@@ -2423,6 +2450,8 @@ snapshots:
       '@types/node': 22.15.31
       '@types/send': 0.17.5
 
+  '@types/web-bluetooth@0.0.21': {}
+
   '@typescript-eslint/eslint-plugin@8.34.0(@typescript-eslint/parser@8.34.0(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
@@ -2622,6 +2651,25 @@ snapshots:
       typescript: 5.8.3
       vue: 3.5.16(typescript@5.8.3)
 
+  '@vueuse/components@13.3.0(vue@3.5.16(typescript@5.8.3))':
+    dependencies:
+      '@vueuse/core': 13.3.0(vue@3.5.16(typescript@5.8.3))
+      '@vueuse/shared': 13.3.0(vue@3.5.16(typescript@5.8.3))
+      vue: 3.5.16(typescript@5.8.3)
+
+  '@vueuse/core@13.3.0(vue@3.5.16(typescript@5.8.3))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 13.3.0
+      '@vueuse/shared': 13.3.0(vue@3.5.16(typescript@5.8.3))
+      vue: 3.5.16(typescript@5.8.3)
+
+  '@vueuse/metadata@13.3.0': {}
+
+  '@vueuse/shared@13.3.0(vue@3.5.16(typescript@5.8.3))':
+    dependencies:
+      vue: 3.5.16(typescript@5.8.3)
+
   accepts@2.0.0:
     dependencies:
       mime-types: 3.0.1

From d35ca7f3ba53ef3c8f775317eb0bdde75a5918ee Mon Sep 17 00:00:00 2001
From: Benjamin Singleton <19498453+tetrogem@users.noreply.github.com>
Date: Sat, 14 Jun 2025 12:46:37 -0500
Subject: [PATCH 5/5] fix: cleanup temp code

---
 apps/vdn-static/src/App.vue                 |  7 ----
 apps/vdn-static/src/i18n/locale.ts          |  2 +-
 apps/vdn-static/src/locales/vp_VL.ts        | 41 ++-------------------
 apps/vdn-static/src/utils/localizeLayout.ts |  2 +-
 4 files changed, 6 insertions(+), 46 deletions(-)

diff --git a/apps/vdn-static/src/App.vue b/apps/vdn-static/src/App.vue
index 3a5d485..86a7d91 100644
--- a/apps/vdn-static/src/App.vue
+++ b/apps/vdn-static/src/App.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import "./assets/style.scss";
 import { ref, type Ref } from "vue";
-import { SAMPLE } from "@repo/common/sample";
 import LocalePicker from "./components/organisms/LocalePicker.vue";
 import { vOnClickOutside } from "@vueuse/components";
 
@@ -54,12 +53,6 @@ const closeBurger = (): void => {
 						@click="closeBurger()"
 						>Resources</RouterLink
 					>
-					<RouterLink
-						class="navbar-item"
-						to="/resources"
-						@click="closeBurger()"
-						>{{ SAMPLE }}</RouterLink
-					>
 					<LocalePicker />
 				</div>
 			</div>
diff --git a/apps/vdn-static/src/i18n/locale.ts b/apps/vdn-static/src/i18n/locale.ts
index 57bbcf3..07484cb 100644
--- a/apps/vdn-static/src/i18n/locale.ts
+++ b/apps/vdn-static/src/i18n/locale.ts
@@ -5,7 +5,7 @@ export interface Locale {
 }
 
 export interface Layout<T> {
-	layout: (keyof T)[];
+	layout: (keyof T)[] | null;
 	data: { [K in keyof T]: T[K] | null };
 }
 
diff --git a/apps/vdn-static/src/locales/vp_VL.ts b/apps/vdn-static/src/locales/vp_VL.ts
index bdfee06..758a1c0 100644
--- a/apps/vdn-static/src/locales/vp_VL.ts
+++ b/apps/vdn-static/src/locales/vp_VL.ts
@@ -1,17 +1,10 @@
 import type { Locale } from "@/i18n/locale";
 import flakkaImg from "@/assets/flakka.png";
-import discordImg from "@/assets/discord.png";
 
 export default {
 	localeName: "Viossa",
 	home: {
-		layout: [
-			"whatIsViossa",
-			"community",
-			"historyOfViossa",
-			"community",
-			"community",
-		],
+		layout: null,
 		data: {
 			whatIsViossa: {
 				title: "Kafaen afto Viossa",
@@ -19,35 +12,9 @@ export default {
 				image: flakkaImg,
 				alt: "Flag of the Viossa Language",
 			},
-			historyOfViossa: {
-				title: "History of Viossa",
-				text: "Viossa began as a Skype group in 2014, created by members of the r/conlangs community on Reddit, as an experiment to simulate the formation of a pidgin language. Pidgins are simplified languages resulting from contact between populations with no shared common language. Unlike most pidgins, which usually have two to three contributor languages, Viossa comes from many diverse languages. This is because people from all around the world helped to contribute to Viossa's vocabulary.",
-				image: flakkaImg,
-				alt: "Flag of the Viossa Language",
-			},
-			community: {
-				title: "Community",
-				text: "The Viossa community is rich and colourful, drawing from many global traditions due to its worldwide online membership. Since the teaching culture puts an emphasis on linguistic immersion, and discourages prescriptivism, the culture of Viossa is as diverse and varied as the language and the people who speak it. For many, their personal dialect is a key form of identity and expression. The fluid nature of Viossa and lack of defined meanings makes Viossa popular for creative purposes, such as poetry and songwriting.",
-				image: null,
-				alt: null,
-			},
-		},
-	},
-	resources: {
-		layout: ["discord"],
-		data: {
-			discord: {
-				title: "Discord Server",
-				subtitle:
-					"This is where most of the action happens! Hop on in!",
-				desc: "Originally started in 2015 something something read the rules here, then click the link below to join!",
-				link: "https://discord.gg/g3mG2gYjZD",
-				rulesLink: "https://viossadiskordserver.github.io/rules",
-				image: discordImg,
-				alt: "Discord logo",
-				joinText: "Join",
-				rulesText: "Rules",
-			},
+			historyOfViossa: null,
+			community: null,
 		},
 	},
+	resources: { layout: null, data: { discord: null } },
 } as const satisfies Locale;
diff --git a/apps/vdn-static/src/utils/localizeLayout.ts b/apps/vdn-static/src/utils/localizeLayout.ts
index ca2729f..3145cda 100644
--- a/apps/vdn-static/src/utils/localizeLayout.ts
+++ b/apps/vdn-static/src/utils/localizeLayout.ts
@@ -5,7 +5,7 @@ export function localizeLayout<T>(
 	layout: DeepReadonly<Layout<T>>,
 ): T[keyof T][] {
 	const sections: T[keyof T][] = [];
-	for (const sectionId of layout.layout) {
+	for (const sectionId of layout.layout ?? []) {
 		const section = (layout.data as T)[sectionId as keyof T];
 		if (section) {
 			sections.push(section);