vinet/viossa.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Merge branch 'main' into monorepo

Browse source
This commit is contained in:
Sheldon Cooper 2025-09-11 23:28:13 -04:00 • committed by GitHub
commit ece6deface
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 292 additions and 129 deletions
Download patch file Download diff file Expand all files Collapse all files

2
apps/vdn-static/package.json
View file

@ -12,6 +12,8 @@
"@tailwindcss/vite": "^4.1.6",
"@types/node": "^22.15.17",
"axios": "^1.11.0",
"@vueuse/components": "^13.3.0",
"@vueuse/core": "^13.3.0",
"bulma": "^1.0.4",
"tailwindcss": "^4.1.6",
"vue": "^3.5.13",

20
apps/vdn-static/src/App.vue
View file

@ -1,17 +1,22 @@
<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";
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"
@ -36,15 +41,22 @@ 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="/kotoba">
Kotoba
</RouterLink>
<LocalePicker />
</div>
</div>
</nav>

51
apps/vdn-static/src/components/organisms/LocalePicker.vue Normal file
View file

@ -0,0 +1,51 @@
<script setup lang="ts">
import { LOCALE_IDS, localeId, useLocale, type LocaleId } from "@/i18n";
import { ref } from "vue";
import { vOnClickOutside } from "@vueuse/components";
const isOpen = ref<boolean>(false);
const toggleOpen = (): void => {
isOpen.value = !isOpen.value;
};
const close = (): void => {
isOpen.value = false;
};
const setLocaleId = (id: LocaleId): void => {
localeId.value = id;
close();
};
</script>
<template>
<div
:class="['dropdown', isOpen && 'is-active']"
v-on-click-outside="close">
<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>

28
apps/vdn-static/src/components/pages/HomePage.vue
View file

@ -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>

24
apps/vdn-static/src/components/pages/ResourcesPage.vue
View file

@ -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"

59
apps/vdn-static/src/i18n/index.ts
View file

@ -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, 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: "vp_VL" satisfies Locale,
fallbackLocale: "en_US" satisfies Locale,
messages: locales,
export const localeId = ref<LocaleId>("en_US");
export function useLocale(opt: UseLocaleOptions = {}) {
const locale = computed<Locale>(() => {
return fallbackProxy(
locales[opt.locale ?? localeId.value],
locales["en_US"],
);
});
export default i18n;
return readonly(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");
},
});
}

39
apps/vdn-static/src/i18n/locale.ts Normal file
View file

@ -0,0 +1,39 @@
export interface Locale {
localeName: string;
home: Layout<HomeSections>;
resources: Layout<Resources>;
}
export interface Layout<T> {
layout: (keyof T)[] | null;
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;
}

8
apps/vdn-static/src/i18n/types.ts
View file

@ -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];
} & {};

40
apps/vdn-static/src/locales/en_US.ts
View file

@ -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: [
{
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: "flakka.png",
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: "flakka.png",
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: [
{
},
},
resources: {
layout: ["discord"],
data: {
discord: {
title: "Discord Server",
subtitle: "This is where most of the action happens! Hop on in!",
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",
image: discordImg,
alt: "Discord logo",
joinText: "Join",
rulesText: "Rules",
},
],
};
},
},
} as const satisfies Locale;

39
apps/vdn-static/src/locales/vp_VL.ts
View file

@ -1,35 +1,20 @@
import type { MessageSchema } from "@/i18n/types";
import type { Locale } from "@/i18n/locale";
import flakkaImg from "@/assets/flakka.png";
export default {
sections: [
{
localeName: "Viossa",
home: {
layout: null,
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: "flakka.png",
image: flakkaImg,
alt: "Flag of the Viossa Language",
},
{
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",
historyOfViossa: null,
community: null,
},
{
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;
resources: { layout: null, data: { discord: null } },
} as const satisfies Locale;

3
apps/vdn-static/src/main.ts
View file

@ -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");

16
apps/vdn-static/src/utils/localizeLayout.ts Normal file
View file

@ -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;
}

46
pnpm-lock.yaml generated
View file

@ -66,6 +66,12 @@ importers:
axios:
specifier: ^1.11.0
version: 1.11.0
'@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
@ -765,6 +771,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}
@ -905,6 +914,23 @@ packages:
abbrev@1.1.1:
resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
'@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==}
@ -3285,6 +3311,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
@ -3486,6 +3514,24 @@ snapshots:
abbrev@1.1.1:
optional: true
'@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: