New computer works :)

apps/vdn-static/src/App.vue

@@ -6,63 +6,84 @@ import { vOnClickOutside } from "@vueuse/components";
 import { useLocale } from "./i18n";
 
 const burgerOpen: Ref<boolean> = ref<boolean>(false);
-
 const toggleBurger = (): void => {
-	burgerOpen.value = !burgerOpen.value;
+        burgerOpen.value = !burgerOpen.value;
 };
-
 const closeBurger = (): void => {
-	burgerOpen.value = false;
+        burgerOpen.value = false;
+};
+
+const resourcesOpen: Ref<boolean> = ref<boolean>(false);
+const toggleResources = (): void => {
+        resourcesOpen.value = !resourcesOpen.value;
+};
+const closeResources = (): void => {
+        resourcesOpen.value = false;
 };
 
 const locale = useLocale();
 </script>
 
 <template>
-	<div class="min-h-screen flex flex-col" v-on-click-outside="closeBurger">
-		<!-- Main application wrapper -->
-		<nav
-			class="navbar is-fixed-top"
-			role="navigation"
-			aria-label="main navigation">
-			<div class="navbar-brand">
-				<RouterLink class="navbar-item has-text-weight-bold" to="/"
-					><img src="@/assets/ViossaFlagRect.svg" alt=""
-				/></RouterLink>
+        <div class="min-h-screen flex flex-col" v-on-click-outside="closeBurger">
+                <!-- Main application wrapper -->
+                <nav
+                        class="navbar is-fixed-top"
+                        role="navigation"
+                        aria-label="main navigation">
+                        <div class="navbar-brand">
+                                <RouterLink class="navbar-item has-text-weight-bold" to="/"
+                                        ><img src="@/assets/ViossaFlagRect.svg" alt=""
+                                /></RouterLink>
 
-				<div class="navbar-item">
-					<button
-						type="button"
-						@click="toggleBurger()"
-						:class="`button is-link is-hoverable is-hidden-desktop ${burgerOpen ? 'is-active' : ''}`"
-						aria-label="menu"
-						:aria-expanded="`${burgerOpen ? 'true' : 'false'}`">
-						<span class="bx bx-burger"></span>
-					</button>
-				</div>
-			</div>
+                                <div class="navbar-item">
+                                        <button
+                                                type="button"
+                                                @click="toggleBurger()"
+                                                :class="`button is-link is-hoverable is-hidden-desktop ${burgerOpen ? 'is-active' : ''}`"
+                                                aria-label="menu"
+                                                :aria-expanded="`${burgerOpen ? 'true' : 'false'}`">
+                                                <span class="bx bx-burger"></span>
+                                        </button>
+                                </div>
+                        </div>
 
-			<div :class="`navbar-menu ${burgerOpen ? 'is-active' : ''}`">
-				<div class="navbar-start">
-					<RouterLink
-						class="navbar-item"
-						to="/"
-						@click="closeBurger()"
-						>{{ locale.navbar.whatIsViossa }}</RouterLink
-					>
-					<RouterLink
-						class="navbar-item"
-						to="/resources"
-						@click="closeBurger()"
-						>{{ locale.navbar.resources }}</RouterLink
-					>
-					<RouterLink class="navbar-item" to="/kotoba">
-						{{ locale.navbar.kotoba }}
-					</RouterLink>
-					<LocalePicker class="navbar-item" />
-				</div>
-			</div>
-		</nav>
-		<RouterView />
-	</div>
-</template>
+                        <div :class="`navbar-menu ${burgerOpen ? 'is-active' : ''}`">
+                                <div class="navbar-start">
+                                        <RouterLink
+                                                class="navbar-item"
+                                                to="/"
+                                                @click="closeBurger()"
+                                                >{{ locale.navbar.whatIsViossa }}</RouterLink
+                                        >
+                                        <div
+                                                :class="['navbar-item', 'has-dropdown', resourcesOpen && 'is-active']"
+                                                v-on-click-outside="closeResources">
+                                                <a class="navbar-link" @click="toggleResources()">
+                                                        {{ locale.navbar.resources }}
+                                                </a>
+                                                <div class="navbar-dropdown">
+                                                        <RouterLink
+                                                                class="navbar-item"
+                                                                to="/resources?category=learning"
+                                                                @click="closeBurger(); closeResources()">
+                                                                {{ locale.navbar.resourcesLearning }}
+                                                        </RouterLink>
+                                                        <RouterLink
+                                                                class="navbar-item"
+                                                                to="/resources?category=cultural"
+                                                                @click="closeBurger(); closeResources()">
+                                                                {{ locale.navbar.resourcesCultural }}
+                                                        </RouterLink>
+                                                </div>
+                                        </div>
+                                        <RouterLink class="navbar-item" to="/kotoba">
+                                                {{ locale.navbar.kotoba }}
+                                        </RouterLink>
+                                        <LocalePicker class="navbar-item" />
+                                </div>
+                        </div>
+                </nav>
+                <RouterView />
+        </div>
+</template>

apps/vdn-static/src/components/molecules/LearningResourceWrapper.vue

@@ -18,22 +18,13 @@
           :text="joinText">
         </a>
 
-        <a :href="``" 
-          target="_blank" 
-          rel="noopener noreferrer nofollow"
-          class="button is-info is-outlined is-medium" 
-          :text="rulesText">
-        </a>
-
         <a :href="rulesLink" 
           target="_blank" 
           rel="noopener noreferrer nofollow"
           class="button is-warning is-outlined is-medium" 
           :text="rulesText">
         </a>
       </div>
-
-
     </div>
   </div>
 </template>

apps/vdn-static/src/components/pages/ResourcesPage.vue

@@ -2,31 +2,45 @@
 import LearningResourceWrapper from "@/components/molecules/LearningResourceWrapper.vue";
 import { useLocale } from "@/i18n";
 import { localizeLayout } from "@/utils/localizeLayout";
+import { useRoute } from "vue-router";
+import { computed } from "vue";
 
 const locale = useLocale();
+const route = useRoute();
+
+const pageTitle = computed(() => {
+        const category = route.query.category;
+        if (category === "learning") return locale.value.navbar.resourcesLearning;
+        if (category === "cultural") return locale.value.navbar.resourcesCultural;
+        return locale.value.resources.title;
+});
+
+const filteredResources = computed(() => {
+        const all = localizeLayout(locale.value.resources.layout);
+        const category = route.query.category;
+        if (!category) return all;
+        return all.filter(r => r.category === category);
+});
 </script>
 
 <template>
-	<div>
-		<section class="section">
-			<h1 class="title">{{ locale.resources.title }}</h1>
-		</section>
-
-		<section class="section container">
-			<LearningResourceWrapper
-				v-for="(resource, index) in localizeLayout(
-					locale.resources.layout,
-				)"
-				: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" />
-		</section>
-	</div>
-</template>
+        <div>
+                <section class="section">
+                        <h1 class="title">{{ pageTitle }}</h1>
+                </section>
+                <section class="section container">
+                        <LearningResourceWrapper
+                                v-for="(resource, index) in filteredResources"
+                                :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" />
+                </section>
+        </div>
+</template>

apps/vdn-static/src/i18n/greeting.ts

@@ -21,6 +21,12 @@ export const GREETINGS = [
 		lang: "wodox",
 	},
 	{
+		title: "Bratulla Viossa.net made!",
+		subtitle: "Hadjiplas per lera Viossa para.",
+		author: "Maikaelja",
+		lang: "viossa",
+	},
+	{	
 		title: "VIOSSA.NET VR̄ATULAŢAJO",
 		subtitle: "Hažilɛ̄ti na viɔssalɛɾa! Viɔssa lɛstɛvr̄ā ɡlɔssa﹐tɛndɔţa!",
 		author: "Rju",

apps/vdn-static/src/i18n/locale.ts

@@ -16,10 +16,17 @@ export interface Layout<T> {
 
 export type VilanticLangs = Record<VilanticId, string>;
 
-export interface Navbar {
-	whatIsViossa: string;
-	resources: string;
-	kotoba: string;
+export interface Resource {
+	category: "learning" | "cultural";
+	title: string;
+	subtitle: string;
+	desc: string;
+	link: string;
+	rulesLink: string;
+	image: string;
+	alt: string;
+	joinText: string;
+	rulesText: string;
 }
 
 export interface HomePage {

apps/vdn-static/src/locales/en_US.ts

@@ -8,6 +8,8 @@ export default {
 	navbar: {
 		whatIsViossa: "What is Viossa?",
 		resources: "Resources",
+resourcesLearning: "Learning Resources",
+resourcesCultural: "Cultural Resources",
 		kotoba: "Kotoba",
 	},
 	home: {
@@ -41,6 +43,7 @@ export default {
 			order: ["discord"],
 			data: {
 				discord: {
+					category: "learning",
 					title: "Discord Server",
 					subtitle:
 						"This is where most of the action happens! Hop on in!",

apps/vdn-static/src/locales/vp_VL.ts

@@ -1,3 +1,4 @@
+import discordImg from "@/assets/discord.png";
 import type { Locale } from "@/i18n/locale";
 import flakkaImg from "@/assets/flakka.png";
 import type { DeepPartial } from "@/utils/deep-partial";
@@ -8,6 +9,8 @@ export default {
 	navbar: {
 		whatIsViossa: "Ka Viossa?",
 		resources: "Lerakran",
+resourcesLearning: "Lerakran",
+resourcesCultural: "Shakaiting",
 		kotoba: "Kotoba",
 	},
 	home: {
@@ -41,6 +44,7 @@ export default {
 			order: ["discord"],
 			data: {
 				discord: {
+					category: "learning",
 					title: "Diskordserver",
 					subtitle:
 						"Alting Viossa tsuite slucha na her! Da zetulla jo!",

apps/vdn-static/src/locales/wp_VL.ts

@@ -8,7 +8,9 @@ export default {
 	vilanticLangs: { viossa: "viosox", wodox: "wodox" },
 	navbar: {
 		whatIsViossa: "viosox e ano?",
-		resources: "tropos",
+resources: "tropos",
+resourcesLearning: "tropos o gen",
+resourcesCultural: "tropos o ro",
 		kotoba: "mot o viosox",
 	},
 	home: {
@@ -42,6 +44,7 @@ export default {
 			order: ["discord"],
 			data: {
 				discord: {
+					category: "learning",
 					title: "server o Diskord",
 					subtitle: "axilkun ge genilkun po ce! wekatutsa!",
 					desc: "danzalil hez server po 2015. ibe dutukun musra po ce, de ibe wiftutsakun dof po pam, de wekatukun po server!",