niko/vi-ilo
1
0
Fork 0
Code Issues 3 Pull requests 1 Projects 1 Releases Packages Wiki Activity Actions

wip: working new i18n system (need to polish still)

Browse source
This commit is contained in:
Benjamin Singleton 2026-02-23 01:29:47 -06:00
parent a240a1b954
commit d258014471
28 changed files with 1025 additions and 1769 deletions
Download patch file Download diff file Expand all files Collapse all files

8
apps/vdn-static/src/pages/discord/rules.vue
View file

@ -1,7 +1,7 @@
<script setup lang="ts">
import DiscordRuleOverview from "@/components/molecules/DiscordRuleOverview.vue";
import DiscordRuleSection from "@/components/molecules/DiscordRuleSection.vue";
import { useLocale } from "@/i18n";
import { useLocale } from "@/new-i18n";
import { computed } from "vue";
const locale = useLocale();
@ -24,13 +24,13 @@ const RULE_ORDER = [
<div>
<section class="section">
<h1 class="title">
{{ pageI18n.title }}
{{ pageI18n.title() }}
</h1>
</section>
<section class="section content">
<h2>{{ pageI18n.overview.title }}</h2>
<h2>{{ pageI18n.overview.title() }}</h2>
<blockquote>
{{ pageI18n.overview.help }}
{{ pageI18n.overview.help() }}
</blockquote>
<ol :style="{ display: 'flex', flexDirection: 'column' }">
<DiscordRuleOverview

18
apps/vdn-static/src/pages/index.vue
View file

@ -1,15 +1,15 @@
<script setup lang="ts">
import HomeSectionWrapper from "@/components/molecules/HomeSectionWrapper.vue";
import { useLocale } from "@/i18n";
import { GREETINGS, type Greeting } from "@/i18n/greeting";
import type * as i18n from "@/i18n/locale";
import { VILANTIC_ID_TO_FLAG } from "@/i18n/vilantic";
import { GREETINGS, type Greeting } from "@/new-i18n/greeting";
import { VILANTIC_ID_TO_FLAG } from "@/new-i18n/vilantic";
import { randomElement } from "@/utils/random";
import { computed } from "vue";
import flakkaImg from "@/assets/flakka.png";
import { useLocale, type Locale } from "@/new-i18n";
import type * as i18n from "@/new-i18n/config";
interface SectionConfig {
id: keyof i18n.Locale["home"]["sections"];
id: keyof Locale["home"]["sections"];
image?: keyof typeof imagesI18n.value;
}
@ -58,7 +58,7 @@ const sectionsI18n = computed(() =>
<div
class="subtitle is-size-6 is-flex is-flex-direction-row is-align-items-center is-gap-1 has-text-text-bold">
&mdash; {{ greeting.author }} ({{
locale.vilanticLangs[greeting.lang]
locale.vilanticLangs[greeting.lang]()
}})
<figure class="image is-32x32">
<img :src="VILANTIC_ID_TO_FLAG[greeting.lang]" />
@ -71,10 +71,10 @@ const sectionsI18n = computed(() =>
<HomeSectionWrapper
v-for="(sectioni18n, index) in sectionsI18n"
:key="index"
:title="sectioni18n.text.title"
:text="sectioni18n.text.body"
:title="sectioni18n.text.title()"
:text="sectioni18n.text.body()"
:image="sectioni18n.image?.src"
:alt="sectioni18n.image?.metadata.alt"
:alt="sectioni18n.image?.metadata.alt()"
:reverse="index % 2 !== 0" />
</section>
</div>

6
apps/vdn-static/src/pages/kotoba.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { useLocale } from "@/i18n";
import { useLocale } from "@/new-i18n";
const locale = useLocale();
</script>
@ -7,12 +7,12 @@ const locale = useLocale();
<template>
<div>
<section class="section">
<h1 class="title">{{ locale.kotoba.title }}</h1>
<h1 class="title">{{ locale.kotoba.title() }}</h1>
</section>
<section class="section container">
<div class="notification is-info block">
<p>{{ locale.kotoba.searchHelp }}</p>
<p>{{ locale.kotoba.searchHelp() }}</p>
</div>
<div class="block is-flex is-flex-direction-row is-gap-2">

22
apps/vdn-static/src/pages/resources.vue
View file

@ -2,14 +2,14 @@
import LearningResourceWrapper, {
type ResourceButton,
} from "@/components/molecules/LearningResourceWrapper.vue";
import { useLocale, type CompileLocale } from "@/i18n";
import type * as i18n from "@/i18n/locale";
import { useLocale, type Locale } from "@/new-i18n";
import type * as i18n from "@/new-i18n/config";
import { ignore } from "@/utils/ignore";
import { computed } from "vue";
import discordImg from "@/assets/discord.png";
interface ResourceConfig {
id: keyof i18n.Locale["resources"]["resources"];
id: keyof Locale["resources"]["resources"];
image?: keyof typeof imagesI18n.value;
}
@ -46,7 +46,7 @@ const resourcesI18n = computed(() =>
);
const computeButtons = (
id: keyof CompileLocale<i18n.Locale>["resources"]["resources"],
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
@ -62,14 +62,14 @@ const computeButtons = (
},
newTab: true,
},
label: buttons.join.label,
label: buttons.join.label(),
style: { color: "primary" },
},
{
link: {
to: { type: "internal", internal: { route: "/discord/rules" } },
},
label: buttons.rules.label,
label: buttons.rules.label(),
style: { color: "warning", outlined: true },
},
];
@ -79,20 +79,20 @@ const computeButtons = (
<template>
<div>
<section class="section">
<h1 class="title">{{ locale.resources.title }}</h1>
<h1 class="title">{{ locale.resources.title() }}</h1>
</section>
<section class="section container">
<LearningResourceWrapper
v-for="(resourceI18n, index) in resourcesI18n"
:key="index"
:title="resourceI18n.text.title"
:subtitle="resourceI18n.text.subtitle"
:desc="resourceI18n.text.desc"
:title="resourceI18n.text.title()"
:subtitle="resourceI18n.text.subtitle()"
:desc="resourceI18n.text.desc()"
:image="
resourceI18n.image && {
src: resourceI18n.image.src,
alt: resourceI18n.image.metadata.alt,
alt: resourceI18n.image.metadata.alt(),
}
"
:buttons="computeButtons(resourceI18n.id)" />