sentence explainer for all sentence fmkey

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

@@ -40,7 +40,7 @@
         </span>
       </div>
 
-      <details v-if="example || v.notes" ref="sdetails">
+      <details v-if="sent_ko || v.notes" ref="sdetails">
         <summary>
           <SentenceAudio
             v-if="example"
@@ -66,18 +66,19 @@
           </div>
           <div v-else v-html="v.notes"></div>
         </blockquote>
-        <div v-if="example">
+        <div>
           <button
             type="button"
-            :disabled="exCurrentKo !== example.ko || !!exNotesLoading"
+            v-if="sent_ko"
+            :disabled="exCurrentKo !== sent_ko"
             @click="
               if (exNotes) {
                 exNotes = '';
               }
-              explainSentence(example.ko);
+              explainSentence(sent_ko);
             "
           >
-            <span v-if="exCurrentKo !== example.ko">
+            <span v-if="exCurrentKo !== sent_ko">
               {{ exNotesLoading || "..." }}
             </span>
             <span v-else-if="!!exNotesLoading"> {{ exNotesLoading }} </span>
@@ -179,13 +180,17 @@ const sentenceDetails = useTemplateRef("sdetails");
 const saud = useTemplateRef<InstanceType<typeof SentenceAudio>>("saud");
 const vaud = useTemplateRef<InstanceType<typeof SentenceAudio>>("vaud");
 
-const v = computed(() => vList.value[vIndex.value]);
+const v = computed<IVoc | null>(() => vList.value[vIndex.value] || null);
 const example = computed(() => {
   if (!v.value?.examples?.length) return null;
   const ex = v.value.examples;
-  return ex[exIndex.value];
+  return ex[exIndex.value] || null;
 });
 
+const sent_ko = computed(
+  () => (example.value?.ko || fmKey !== "vocabulary" ? v.value?.ko : "") || "",
+);
+
 const MAX_VOC = 5;
 
 const { frontmatter, page } = useData();
@@ -215,7 +220,7 @@ watch(quizState, () => {
 
 let timeoutSetExNotes = 0;
 
-watch(example, () => {
+watch(sent_ko, () => {
   if (timeoutSetExNotes) return;
 
   timeoutSetExNotes = window.setTimeout(() => {
@@ -225,13 +230,13 @@ watch(example, () => {
       exNotes.value = "";
     }
 
-    if (!example.value) return;
+    if (!sent_ko.value) return;
 
-    let { ko } = example.value;
+    let ko = sent_ko.value;
     ko = ko.replaceAll("**", "");
 
     if (!exNotesLoading.value) {
-      exCurrentKo.value = example.value.ko;
+      exCurrentKo.value = sent_ko.value;
     }
 
     if (supabase) {
@@ -279,6 +284,8 @@ watch(
 );
 
 watch(isEdit, () => {
+  if (!v.value) return;
+
   if (isEdit.value) {
     const { ko, ...vContent } = v.value;
     vEditContent.value = yaml.stringify(vContent);
@@ -317,11 +324,15 @@ function makeVList() {
     Math.random() * Math.min(MAX_VOC, vList.value.length),
   );
 
+  if (!v.value) return;
+
   const ex = v.value.examples;
   exIndex.value = ex ? Math.floor(Math.random() * ex.length) : 0;
 }
 
 function makeNewExIndex() {
+  if (!v.value) return;
+
   if (v.value.examples && v.value.examples.length > 1) {
     const newValue = Math.floor(Math.random() * (v.value.examples.length - 1));
     exIndex.value = newValue >= exIndex.value ? newValue + 1 : newValue;
@@ -373,6 +384,8 @@ function mark(isRight: boolean) {
     vIndex.value = i;
   }
 
+  if (!v.value) return;
+
   const ex = v.value.examples;
   exIndex.value = ex ? Math.floor(Math.random() * ex.length) : 0;
 }
@@ -393,6 +406,8 @@ function updateCats(cat: string) {
 }
 
 async function onVContentSave() {
+  if (!v.value) return;
+
   const oldV = v.value;
   const newV = Voc.parse({ ko: oldV.ko, ...yaml.parse(vEditContent.value) });
 

docs/howtostudykorean/unit-1/02-particles.md

@@ -849,8 +849,8 @@ Common Usages:
 
 Examples:
 
-- **호텔**에 식당이 있어요 = There is a restaurant in the **hotel**
+- **호텔**에 식당이 있어요 = <span class="md spoiler">There is a restaurant in the **hotel**</span>
-- **호텔**은 학교 옆에 있어요 = The **hotel** is beside the school
+- **호텔**은 학교 옆에 있어요 = <span class="md spoiler">The **hotel** is beside the school</span>
 
 </Details>
 
@@ -919,7 +919,7 @@ Position words are typically placed after a noun to indicate in which direction
 - 저의 친구는 은행 **안**에 있어요 = <span class="md spoiler">My friend is **in** the bank</span>
 - 개는 집 **안**에 있어요 = <span class="md spoiler">The dog is **in** the house</span>
 
-안 can also be used to indicate that some action is completed “within” or “inside” a time period. This usage is discussed in [Lesson 24](https://www.howtostudykorean.com/unit1/unit-1-lessons-17-25-2/lesson-24/). For example:
+안 can also be used to indicate that some action is completed “within” or “inside” a time period. This usage is discussed in [Lesson 24](./24-before-after-since-within.md). For example:
 
 - 우리는 한 시간 **안**에 그 일을 끝내야 돼요 = <span class="md spoiler">We need to finish that job/task **within** one hour</span>
 
@@ -1301,7 +1301,7 @@ In both pairs of examples (using ~는/은 or ~이/가), the translation does not
 
 Note that this “comparative” function of ~는/은 can be used in much more complicated sentences, and can be attached to other grammatical principles – neither of which you have learned yet. In future lessons, not only will you see examples of increasing complexity applying this concept, but its usage with other grammatical principles will be introduced specifically. You need to remember that the example sentences given at this level are incredibly simple and do not really reflect actual sentences that you are likely to hear as one-off sentences from Korean people. Real speech is much more complex and it usually is an intricate combination of many clauses and grammatical principles.
 
-Our lessons don’t really get into the use of multiple clauses until [Lesson 24](https://www.howtostudykorean.com/unit1/unit-1-lessons-17-25-2/lesson-24/). Creating sentences with more than one clause opens an entire other can of worms that you don’t have the tools to deal with yet. I encourage you to NOT read ahead to that lesson. Rather, I encourage you to keep the information from this lesson in mind as you eventually do reach that level.
+Our lessons don’t really get into the use of multiple clauses until [Lesson 24](./24-before-after-since-within.md). Creating sentences with more than one clause opens an entire other can of worms that you don’t have the tools to deal with yet. I encourage you to NOT read ahead to that lesson. Rather, I encourage you to keep the information from this lesson in mind as you eventually do reach that level.
 
 As you progress through our Lessons, you will see both “~는/은” and “~이/가” used as the subject particles in the thousands of example sentences we have provided. As almost all of our example sentences are just written as one sentence (without any background, prior context, or explanation of the situation), there is no way to tell if something is being compared to – and thus – their usage is usually arbitrary. That being said – every Korean example sentence throughout all of our lessons is always checked by a native Korean speaker to make sure that nothing is awkward (or incorrect).