edit button with validator and YAML

docs/.vitepress/theme/components/SentenceAudio.vue

@@ -15,15 +15,7 @@
 import { useTemplateRef } from "vue";
 import TTS from "./TTS.vue";
 import AudioButton from "./AudioButton.vue";
-
-export interface IVoc {
-  ko: string;
-  audio?: string;
-  en: string;
-  usages?: IVoc[];
-  notes?: string;
-  examples?: IVoc[];
-}
+import { IVoc } from "../types.ts";
 
 defineProps<{
   v: IVoc;

docs/.vitepress/theme/components/VocabQuiz.vue

@@ -57,7 +57,7 @@
       <nav>
         <label v-for="c in vCats" :key="c">
           <input type="checkbox" :name="c" checked @change="updateCats(c)" />
-          {{ c.replace("_", " ") }}
+          {{ c.replace(/_/g, " ") }}
         </label>
       </nav>
       <nav>
@@ -99,8 +99,10 @@ import {
   useTemplateRef,
   watch,
 } from "vue";
-import SentenceAudio, { IVoc } from "./SentenceAudio.vue";
+import yaml from "yaml";
+import SentenceAudio from "./SentenceAudio.vue";
 import { supabase } from "../supabase.ts";
+import { IVoc, Voc } from "../types.ts";
 
 const { fmKey = "vocabulary" } = defineProps<{
   fmKey?: string;
@@ -157,7 +159,7 @@ watch(isKoFirst, () => {
 watch(isEdit, () => {
   if (isEdit.value) {
     const { ko, ...vContent } = v.value;
-    vEditContent.value = JSON.stringify(vContent, null, 2);
+    vEditContent.value = yaml.stringify(vContent);
   } else {
     vEditContent.value = "";
   }
@@ -240,7 +242,7 @@ function updateCats(cat: string) {
 
 async function onVContentSave() {
   const oldV = v.value;
-  const newV = { ko: oldV.ko, ...JSON.parse(vEditContent.value) };
+  const newV = Voc.parse({ ko: oldV.ko, ...yaml.parse(vEditContent.value) });
 
   let key = "";
   let vKey = oldV.ko;
@@ -257,7 +259,8 @@ async function onVContentSave() {
       vCount.set(v.ko, i + 1);
 
       if (oldV.ko === v.ko && oldV.en === v.en) {
-        key = k;
+        // TODO: handling multiple fmKey comma-separated
+        key = JSON.stringify([fmKey, k]);
         vKey = vK;
 
         vocabulary[k][i_vs] = newV;

docs/.vitepress/theme/types.ts

@@ -0,0 +1,16 @@
+import * as z from "zod";
+
+export const Voc = z.object({
+  ko: z.string(),
+  audio: z.string().optional(),
+  en: z.string(),
+  get usage() {
+    return z.array(Voc).optional();
+  },
+  notes: z.string().optional(),
+  get examples() {
+    return z.array(Voc).optional();
+  },
+});
+
+export type IVoc = z.infer<typeof Voc>;