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

docs/howtostudykorean/unit-1/05-tenses.md

@@ -420,7 +420,7 @@ vocabulary:
       examples:
         - ko: 우리 집은 너무 **멀어요**
           en: Our home is very **far**
-        - ko: 저는 먼 병원에 갔어요
+        - ko: 저는 먼 **병원에** 갔어요
           en: I went to a **far away** hospital (a hospital that is **far away**)
 
     - ko: 마르다
@@ -440,7 +440,7 @@ vocabulary:
       examples:
         - ko: 저와 저의 아버지는 너무 **비슷해요**
           en: My father and I are very **similar**
-        - ko: 저는 친구와 비슷해요
+        - ko: 저는 친구와 **비슷해요**
           en: I am **similar** to my friend
 
     - ko: 싫다
@@ -1245,7 +1245,7 @@ Example:
 Example:
 
 - &NoBreak;<TTS class="md">우리 집은 너무 **멀어요**</TTS> = <span class="md spoiler">Our home is very **far**</span>
-- &NoBreak;<TTS class="md">저는 먼 병원에 갔어요</TTS> = <span class="md spoiler">I went to a **far away** hospital (a hospital that is **far away**)</span>
+- &NoBreak;<TTS class="md">저는 먼 **병원에** 갔어요</TTS> = <span class="md spoiler">I went to a **far away** hospital (a hospital that is **far away**)</span>
 
 </Details>
 
@@ -1274,7 +1274,7 @@ The pronunciation of this word is closer to “비스타다”
 Examples:
 
 - &NoBreak;<TTS class="md">저와 저의 아버지는 너무 **비슷해요**</TTS> = <span class="md spoiler">My father and I are very **similar**</span>
-- &NoBreak;<TTS class="md">저는 친구와 비슷해요</TTS> = <span class="md spoiler">I am **similar** to my friend</span>
+- &NoBreak;<TTS class="md">저는 친구와 **비슷해요**</TTS> = <span class="md spoiler">I am **similar** to my friend</span>
 
 </Details>
 

docs/howtostudykorean/unit-1/13-and-with.md

@@ -67,7 +67,7 @@ vocabulary:
       audio: https://www.howtostudykorean.com/wp-content/uploads/2015/11/Lesson13v6.mp3
       en: underground
       examples:
-        - ko: 차는 지하 **주차장**에 있어요
+        - ko: 차는 **지하** 주차장에 있어요
           en: The car is in the **underground** parking lot
 
     - ko: 빵
@@ -80,7 +80,7 @@ vocabulary:
           en: I made **bread** for my friend
         - ko: 우리는 **빵**을 같이 먹었어요
           en: We ate **bread** together
-        - ko: 애기는 **밥**하고 빵을 먹었어요
+        - ko: 애기는 밥하고 **빵**을 먹었어요
           en: The baby ate rice and **bread**
 
     - ko: 쓰레기
@@ -291,7 +291,7 @@ vocabulary:
       examples:
         - ko: 우리가 **늦**어서 죄송해요
           en: Sorry we arrived **late**
-        - ko: 우리는 늦은 저녁을 먹었어요
+        - ko: 우리는 **늦**은 저녁을 먹었어요
           en: We ate a **late** dinner
         - ko: 그녀는 언제나 **늦**게 와요
           en: She comes **late** every time
@@ -434,7 +434,7 @@ vocabulary:
           en: I want to eat what we ate **(together)** last time
         - ko: 이 일을 **같이** 하고 싶으면 우리는 협조해야 돼요
           en: If we want to do this job **together**, we have to cooperate
-        - ko: 우리 학교에서 학생들은 역사와 지리를 같이 배워요
+        - ko: 우리 학교에서 학생들은 역사와 지리를 **같이** 배워요
           en: At our school, students learn history and geography **together**
 ---
 
@@ -571,7 +571,7 @@ Common Usages:
 
 Examples:
 
-- 차는 지하 **주차장**에 있어요 = <span class="md spoiler">The car is in the **underground** parking lot</span>
+- 차는 **지하** 주차장에 있어요 = <span class="md spoiler">The car is in the **underground** parking lot</span>
 
 </Details>
 
@@ -589,7 +589,7 @@ Example:
 - 저는 **빵**을 먹고 싶어요 = <span class="md spoiler">I want to eat **bread**</span>
 - 저는 친구를 위해 **빵**을 만들었어요 = <span class="md spoiler">I made **bread** for my friend</span>
 - 우리는 **빵**을 같이 먹었어요 = <span class="md spoiler">We ate **bread** together</span>
-- 애기는 **밥**하고 빵을 먹었어요 = <span class="md spoiler">The baby ate rice and **bread**</span>
+- 애기는 밥하고 **빵**을 먹었어요 = <span class="md spoiler">The baby ate rice and **bread**</span>
 
 </Details>
 
@@ -927,7 +927,7 @@ This is often irrelevant, but 늦다 is both <span class="md spoiler">a verb and
 
 It is often used as an adjective to describe a time that is late. For example:
 
-- 우리는 늦은 저녁을 먹었어요 = <span class="md spoiler">We ate a **late** dinner</span>
+- 우리는 **늦**은 저녁을 먹었어요 = <span class="md spoiler">We ate a **late** dinner</span>
 
 As an adjective, ~게 is often added to it in order to create <span class="md spoiler">an adverb</span>. For example:
 
@@ -1136,7 +1136,7 @@ Examples:
 - 엄마가 우리랑 **같이** 못 먹어서 안타까워요 = <span class="md spoiler">It’s too bad that your mom can’t eat **together** (with us)</span>
 - 나는 우리가 지난 번에 **같이** 먹은 것을 먹고 싶어 = <span class="md spoiler">I want to eat what we ate **(together)** last time</span>
 - 이 일을 **같이** 하고 싶으면 우리는 협조해야 돼요 = <span class="md spoiler">If we want to do this job **together**, we have to cooperate</span>
-- 우리 학교에서 학생들은 역사와 지리를 같이 배워요 = <span class="md spoiler">At our school, students learn history and geography **together**</span>
+- 우리 학교에서 학생들은 역사와 지리를 **같이** 배워요 = <span class="md spoiler">At our school, students learn history and geography **together**</span>
 
 </Details>