feat: setup unplugin-vue-router, fixed eslnt config, SmartLink for type-safe internal/external links

apps/vdn-static/src/pages/index.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import HomeSectionWrapper from "@/components/molecules/HomeSectionWrapper.vue";
+import { useLocale } from "@/i18n";
+import { GREETINGS, type Greeting } from "@/i18n/greeting";
+import { VILANTIC_ID_TO_FLAG } from "@/i18n/vilantic";
+import { localizeLayout } from "@/utils/localizeLayout";
+import { randomElement } from "@/utils/random";
+
+const locale = useLocale();
+const greeting: Greeting = randomElement(GREETINGS);
+</script>
+
+<template>
+	<div>
+		<section class="hero has-background-primary-soft is-primary">
+			<div
+				class="hero-body"
+				style="padding-top: 3.75rem; padding-bottom: 3rem">
+				<div class="title has-text-text-bold">{{ greeting.title }}</div>
+				<div class="subtitle has-text-text-bold mb-4">
+					{{ greeting.subtitle }}
+				</div>
+				<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]
+					}})
+					<figure class="image is-32x32">
+						<img :src="VILANTIC_ID_TO_FLAG[greeting.lang]" />
+					</figure>
+				</div>
+			</div>
+		</section>
+
+		<section class="section container">
+			<HomeSectionWrapper
+				v-for="(section, index) in localizeLayout(locale.home.layout)"
+				:key="index"
+				:title="section.title"
+				:text="section.text"
+				:image="section.image ?? undefined"
+				:alt="section.alt ?? undefined"
+				:reverse="index % 2 !== 0" />
+		</section>
+	</div>
+</template>

apps/vdn-static/src/pages/kotoba.vue

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

apps/vdn-static/src/pages/resources.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import LearningResourceWrapper from "@/components/molecules/LearningResourceWrapper.vue";
+import { useLocale } from "@/i18n";
+import { localizeLayout } from "@/utils/localizeLayout";
+
+const locale = useLocale();
+</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>