feat: onboarding i18n

src/components/Onboarding.vue

@@ -7,6 +7,9 @@ import { fromKeycode } from '../keyboard';
 import { useClientStore, usePrfStore } from '../stores';
 import { prettyPrint } from '../util';
 import { VueMarkdownIt } from '@f3ve/vue-markdown-it';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const prf = usePrfStore();
 const client = useClientStore();
@@ -25,6 +28,11 @@ interface Datum {
 const game = computed(() => prf.current?.meta.game);
 
 const processText = (s: string) => {
+    // Why do I have to do this
+    s = s
+        .split('\n')
+        .map((l) => l.trim())
+        .join('\n');
     if (prf.current!.data.keyboard?.data.enabled) {
         const testKey = prf.current!.data.keyboard?.data.test;
         const readable = fromKeycode(testKey);
@@ -38,9 +46,14 @@ const processText = (s: string) => {
     return s.replace('%TESTMENU%', 'a button on the back of the controller');
 };
 
-const loadPage = async (title: string) => {
+const loadPage = (title: string, messages?: object) => {
     return {
-        text: await (await fetch(`/help-${title}.md`)).text(),
+        text: t(`onboarding.${title}`, {
+            endlink: '</a>',
+            black: '<span class="bg-black text-white">',
+            end: '</span>',
+            ...messages,
+        }),
         image: `help-${title}.png`,
     };
 };
@@ -75,14 +88,25 @@ const data: ComputedRef<Datum[]> = computed(() => {
     return res;
 });
 
+const counter = ref(0);
+
 onMounted(async () => {
     [standardOngeki, systemProcessing, lever, server, finaleOngeki] =
         await Promise.all([
-            loadPage('standard'),
+            loadPage('standard', {
+                bigblack: '<div class="p-2 mt-1 mb-1 bg-black text-white">',
+                endbig: '</div>',
+            }),
             loadPage('ongeki-system-processing'),
             loadPage('ongeki-lever'),
-            loadPage('chunithm-server'),
-            loadPage('finale'),
+            loadPage('chunithm-server', {
+                link: '<a href="https://gitea.tendokyu.moe/Dniel97/SEGAguide/wiki/FAQ#game-is-stuck-at-checking-distribution-server" target="_blank">',
+            }),
+            loadPage('finale', {
+                segaguide:
+                    '<a href="https://gitea.tendokyu.moe/Dniel97/SEGAguide/wiki/FAQ" target="_blank">',
+                twotorial: '<a href="https://two-torial.xyz/" target="_blank">',
+            }),
         ]);
     standardOngeki = {
         ...standardOngeki,
@@ -102,8 +126,6 @@ onMounted(async () => {
     };
 });
 
-const counter = ref(0);
-
 const exitLabel = computed(() => {
     return props.firstTime === true && counter.value < data.value.length - 1
         ? 'Skip'