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

wip: RichText & Templating for i18n, refactored & began i18n for Discord Server Rules using the new features

Browse source
This commit is contained in:
Benjamin Singleton 2026-02-14 22:56:17 -06:00
parent feacb9b754
commit a3adc2526f
25 changed files with 929 additions and 141 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,83 +1,41 @@
<script setup lang="ts">
import SmartLink from "@/components/organisms/SmartLink.vue";
import { useLocale } from "@/i18n";
import SmartLink from "@/components/atoms/SmartLink.vue";
import DiscordRuleOverview from "@/components/molecules/DiscordRuleOverview.vue";
import { useI18n } from "@/i18n";
const locale = useLocale();
const i18n = useI18n();
const rules = i18n.v("discord.rulesPage.rules");
const RULE_ORDER = [
"noTranslation",
"lfsv",
"viossaOnlyChats",
"sfw",
"respectOthers",
"respectStaff",
"controversialTopics",
] as const satisfies (keyof typeof rules)[];
</script>
<template>
<div>
<section class="section">
<h1 class="title">{{ locale.discord.rulesPage.title }}</h1>
<h1 class="title">
{{ i18n.t("discord.rulesPage.title") }}
</h1>
</section>
<section class="section content">
<h2>{{ locale.discord.rulesPage.overview.title }}</h2>
<h2>{{ i18n.t("discord.rulesPage.overview.title") }}</h2>
<blockquote>
{{ locale.discord.rulesPage.overview.help }}
{{ i18n.t("discord.rulesPage.overview.help") }}
</blockquote>
<ol>
<SmartLink
covert
:to="{ type: 'internal', internal: { id: 'rule-1' } }">
<li>
No translation! Do not translate to/from Viossa on the
server, except the big four translatables (you can learn
in hard mode without them!)
</li>
</SmartLink>
<SmartLink
covert
:to="{ type: 'internal', internal: { id: 'rule-2' } }">
<li>If it's understood, it's Viossa.</li>
</SmartLink>
<SmartLink
covert
:to="{ type: 'internal', internal: { id: 'rule-3' } }">
<li>
The chats in the Viossa Only category are Viossa only.
</li>
</SmartLink>
<SmartLink
covert
:to="{ type: 'internal', internal: { id: 'rule-4' } }">
<li>
This server is SFW. No sexually explicit, gory, or
violent content.
</li>
</SmartLink>
<SmartLink
covert
:to="{ type: 'internal', internal: { id: 'rule-5' } }">
<li>Don't use hate speech, and respect each other.</li>
</SmartLink>
<SmartLink
covert
:to="{ type: 'internal', internal: { id: 'rule-6' } }">
<li>
Respect the rulings of the staff (<b>@Yewald</b> and
<b>@Yewaldnen</b>).
</li>
</SmartLink>
<SmartLink
covert
:to="{ type: 'internal', internal: { id: 'rule-7' } }">
<li>
Discussion of controversial topics (politics, war, etc.)
should be directed to #polite, which requires the @Ike
role to view, which is itself locked behind
<b>@Viossadjin</b> and <b>@mellandjin</b>.
<ul class="mt-0">
<li>
<b>#feels-and-advice</b> is for talking about
your feelings openly, but we draw the line at
suicidal or violent ideation. These are trains
of thought to be brought to a therapist, and are
not jokes. Because of their seriousness, they
simply don't belong here.
</li>
</ul>
</li>
</SmartLink>
<ol :style="{ display: 'flex', flexDirection: 'column' }">
<DiscordRuleOverview
v-for="(id, index) in RULE_ORDER"
:key="index"
:rule-number="index + 1"
:overview="rules[id].overview" />
</ol>
</section>
<section class="section content" id="rule-1">

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

@ -1,13 +1,14 @@
<script setup lang="ts">
import HomeSectionWrapper from "@/components/molecules/HomeSectionWrapper.vue";
import { useLocale } from "@/i18n";
import { useI18n } from "@/i18n";
import { GREETINGS, type Greeting } from "@/i18n/greeting";
import type { Locale } from "@/i18n/locale";
import { VILANTIC_ID_TO_FLAG } from "@/i18n/vilantic";
import { randomElement } from "@/utils/random";
import { computed } from "vue";
const locale = useLocale();
const i18n = useI18n();
const greeting: Greeting = randomElement(GREETINGS);
const SECTION_ORDER = [
@ -17,7 +18,7 @@ const SECTION_ORDER = [
] as const satisfies (keyof Locale["home"]["sections"])[];
const sections = computed(() =>
SECTION_ORDER.map((id) => locale.value.home.sections[id]),
SECTION_ORDER.map((id) => i18n.v(`home.sections.${id}`)),
);
</script>
@ -34,7 +35,7 @@ const sections = 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]
i18n.v("vilanticLangs")[greeting.lang]
}})
<figure class="image is-32x32">
<img :src="VILANTIC_ID_TO_FLAG[greeting.lang]" />

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

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

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

@ -2,14 +2,14 @@
import LearningResourceWrapper, {
type ResourceButton,
} from "@/components/molecules/LearningResourceWrapper.vue";
import { useLocale } from "@/i18n";
import { useI18n } from "@/i18n";
import type { Locale } from "@/i18n/locale";
import { ignore } from "@/utils/ignore";
import { computed } from "vue";
const locale = useLocale();
const i18n = useI18n();
const resourceIdToResource = computed(() => locale.value.resources.resources);
const resourceIdToResource = computed(() => i18n.v("resources.resources"));
const RESOURCE_ORDER = [
"discord",
@ -53,7 +53,7 @@ const computeButtons = (
<template>
<div>
<section class="section">
<h1 class="title">{{ locale.resources.title }}</h1>
<h1 class="title">{{ i18n.t("resources.title") }}</h1>
</section>
<section class="section container">