spoiler tag

docs/.vitepress/config.mts

@@ -1,4 +1,4 @@
-import { defineConfig } from "vitepress";
+import { defineConfig, MarkdownOptions } from "vitepress";
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -13,4 +13,53 @@ export default defineConfig({
       level: "deep",
     },
   },
+  markdown: {
+    config(md) {
+      const mdInline: MarkdownOptions["config"] = (md) => {
+        const className = "md";
+
+        md.core.ruler.after("inline", "inline_class_md", (state: any) => {
+          const tokens = state.tokens;
+          const tagPattern = new RegExp(
+            `class=(?:\"|')([^\"']*\\b${escapeReg(className)}\\b[^\"']*)(?:\"|')`,
+            "i",
+          );
+
+          for (let i = 0; i < tokens.length; i++) {
+            const t = tokens[i];
+            if (!/^(html_inline|html_block)$/.test(t.type)) continue;
+            const html = t.content;
+            // match tags with class including the target class, capture inner content (non-greedy)
+            const pattern = new RegExp(
+              `<([a-zA-Z0-9-]+)(\\b[^>]*)?>([\\s\\S]*?)<\\/\\1>`,
+              "gi",
+            );
+            let lastIndex = 0;
+            let out = "";
+            let m;
+            while ((m = pattern.exec(html)) !== null) {
+              const [full, tagName, attrs = "", inner] = m;
+              const idx = m.index;
+              if (idx > lastIndex) out += html.slice(lastIndex, idx);
+              if (tagPattern.test(attrs)) {
+                // render inner as inline markdown
+                out += `<${tagName}${attrs}>${md.renderInline(inner)}</${tagName}>`;
+              } else {
+                out += full;
+              }
+              lastIndex = idx + full.length;
+            }
+            if (lastIndex === 0) continue;
+            if (lastIndex < html.length) out += html.slice(lastIndex);
+            t.content = out;
+          }
+        });
+
+        function escapeReg(s: string) {
+          return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+        }
+      };
+      md.use(mdInline);
+    },
+  },
 });

docs/.vitepress/theme/components/Details.vue

@@ -1,7 +1,7 @@
 <template>
   <details>
     <summary :class="$style.summary">{{ summary }}</summary>
-    <blockquote>
+    <blockquote :class="$style.inner">
       <slot />
     </blockquote>
   </details>
@@ -17,4 +17,8 @@ defineProps<{
 .summary {
   margin-top: -1em !important;
 }
+
+.inner p {
+  margin: 16px 0;
+}
 </style>

docs/.vitepress/theme/components/TTS.vue

@@ -1,10 +1,10 @@
 <template>
   <span>
-    <span ref="main">
+    <span ref="main" :class="class">
       <slot />
     </span>
     <span>
-      <button type="button" @click="playAudio()">▶️</button>
+      <button type="button" @click="playAudio()">🎤︎︎</button>
     </span>
   </span>
 </template>
@@ -13,6 +13,7 @@
 import { useTemplateRef } from "vue";
 
 const { lang = "ko" } = defineProps<{
+  class?: string;
   lang?: string;
 }>();
 

docs/.vitepress/theme/custom.css

@@ -0,0 +1,3 @@
+.spoiler:not(:hover) {
+  filter: blur(5px);
+}

docs/.vitepress/theme/index.ts

@@ -1,3 +1,4 @@
+import "./custom.css";
 import "./style.css";
 
 import DefaultTheme from "vitepress/theme";

docs/howtostudykorean/unit-1/07-irregulars.md

@@ -10,77 +10,287 @@ You can try to find all of the words from this lesson, and all of the words from
 
 ### Nouns:
 
-눈썹 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2014/01/vLesson-7-1.mp3" /> = eyebrow
+눈썹 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2014/01/vLesson-7-1.mp3" /> = <span class="spoiler">eyebrow</span>
 
 <Details>
 
 Common Usages:
 
-- <TTS>속눈썹</TTS> = eyelashes
+- <TTS>속눈썹</TTS> = <span class="spoiler">eyelashes</span>
 
 Examples:
 
-- <TTS>그 사람의 <b>눈썹</b>은 짙어요</TTS> = That person’s **eyebrows** are thick
+- <TTS class="md">그 사람의 **눈썹**은 짙어요</TTS> = <span class="md spoiler">That person’s **eyebrows** are thick</span>
-- <TTS>저도 그런 <b>눈썹</b>이 있었으면 좋겠어요</TTS> = I wish I had that type of **eyebrows**, too
+- <TTS class="md">저도 그런 **눈썹**이 있었으면 좋겠어요</TTS> = <span class="md spoiler">I wish I had that type of **eyebrows**, too</span>
-
 </Details>
 
-교사 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2014/01/vLesson-7-2.mp3" /> = teacher
+교사 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2014/01/vLesson-7-2.mp3" /> = <span class="md spoiler">teacher</span>
 
 <Details>
 
-Notes: 교사 refers more to the position of a teacher. You would usually refer to a teacher by calling him/her “선생님.” However, if you wanted to tell somebody what your position was, you could use 교사 (선생님 would also work here as well)
+Notes: 교사 refers more to the position of a teacher. You would usually refer to a teacher by calling him/her “선생님.” However, if you wanted to tell somebody what your position was, you could use 교사 (선생님 would also work here as well).
 
 Examples:
 
-- <TTS>저는 영어교사예요</TTS> = I am an English teacher
+- <TTS class="md">저는 영어**교사**예요</TTS> = <span class="md spoiler">I am an English **teacher**</span>
-- <TTS>대학교 때 자유롭게 공부하고 싶으면 지도교사가 전공을 나중에 선택하라고 말했어요</TTS>
+- <TTS class="md">대학교 때 자유롭게 공부하고 싶으면 지도**교사**가 전공을 나중에 선택하라고 말했어요</TTS>
-  - If you want to study freely in university, my guidance counselor told me to choose my major later
+  - <span class="md spoiler">If you want to study freely in university, my **guidance** **counselor** told me to choose my major later</span>
 
 </Details>
 
-반 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2014/01/vLesson-7-4.mp3" /> = class of students in school
+반 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2014/01/vLesson-7-4.mp3" /> = <span class="md spoiler">class of students in school</span>
 
 <Details>
 
 Common Usages:
 
-- <TTS>우리 반</TTS> = our class
+- <TTS>우리 반</TTS> = <span class="md spoiler">our class</span>
-- <TTS>2학년 3반</TTS> = class 2-3
+- <TTS>2학년 3반</TTS> = <span class="md spoiler">class 2-3</span>
-- <TTS>반장</TTS> = class president
+- <TTS>반장</TTS> = <span class="md spoiler">class president</span>
 
 Examples:
 
-- <TTS>몇 반이에요?</TTS> = What class are you in?
+- <TTS class="md">몇 **반**이에요?</TTS> = <span class="md spoiler">What **class** are you in?</span>
-- <TTS>그 여자는 우리 반에서 제일 못생긴 여자예요</TTS> = That girl is the ugliest in our class
+- <TTS class="md">그 여자는 우리 **반**에서 제일 못생긴 여자예요</TTS> = <span class="md spoiler">That girl is the ugliest in our **class**</span>
 
 </Details>
 
-직장 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2014/01/vLesson-7-5.mp3" /> = location of work
+직장 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2014/01/vLesson-7-5.mp3" /> = <span class="md spoiler">location of work</span>
 
-벽 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2014/01/vLesson-7-10.mp3" /> = wall
+<Details>
 
-털 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2014/01/vLesson-7-11.mp3" /> = hair (not on head), fur
+The pronunciation of this word is closer to “직짱”
 
-머리카락 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2014/01/vLesson-7-12.mp3" /> = hair (on head)
+Notes: In English, we say “work” to refer to _what_ is being done and _where_ it is being done. For example “I am doing work at work.” 직장 refers to the location in which you work.
 
-저녁 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2018/09/Lesson-7-8.mp3" /> = dinner, evening
+Examples:
 
-점심 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2018/09/Lesson7-9.mp3" /> = lunch, noonish
+- <TTS class="md">그는 **직장**에서 일찍 퇴근했어요</TTS> = <span class="md spoiler">He left **work** early</span>
+- <TTS class="md">**직장**에서 더 멀리 이사하게 되었어요</TTS> = <span class="md spoiler">I ended up moving farther away from <strong>work</strong></span>
+- <TTS class="md">학업을 진행하면서 **직장**도 다녀요</TTS> = <span class="md spoiler">As I progress/continue my studies, I also go to <strong>work</strong></span>
+- <TTS class="md">저는 일반적으로 그 사람을 **직장**에서 보지 못해요</TTS> = <span class="md spoiler">I generally don’t see that person at <strong>work</strong></span>
+- <TTS class="md">자신감에 찬 표정으로 새로운 **직장**에 들어갔어요</TTS> = <span class="md spoiler">He went into a new **workplace** with a face full of confidence</span>
 
-옷 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/11/Lesson-7-v1.mp3" /> = clothes
+</Details>
 
-오전 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2014/01/vLesson-7-39.mp3" /> = morning
+벽 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2014/01/vLesson-7-10.mp3" /> = <span class="md spoiler">wall</span>
 
-오후 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2014/01/vLesson-7-40.mp3" /> = afternoon
+<Details>
 
-여름 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2014/01/vLesson-7-42.mp3" /> = summer
+Common Usages:
 
-가을 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2014/01/vLesson-7-43.mp3" /> = fall
+- <TTS>벽지</TTS> = <span class="md spoiler">wallpaper</span>
+- <TTS>절벽</TTS> = <span class="md spoiler">cliff</span>
+- <TTS>벽에 기대다</TTS> = <span class="md spoiler">to lean against a wall</span>
 
-겨울 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2014/01/vLesson-7-44.mp3" /> = winter
+Examples:
 
-봄 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2014/01/vLesson-7-45.mp3" /> = spring
+- <TTS class="md">저는 사진을 **벽**에 걸었어요</TTS> = <span class="md spoiler">I hung a picture on a <strong>wall</strong></span>
+- <TTS class="md">그림은 **벽**에 걸려 있어요</TTS> = <span class="md spoiler">The picture is hanging on the **wall**</span>
+- <TTS class="md">**벽**에 붙어 있는 광고를 봤어요?</TTS> = <span class="md spoiler">Did you see the advertisement that is attached to the **wall**?</span>
+- <TTS class="md">노동자들이 무너질 것 같은 **벽**을 안정시켰어요</TTS>
+  - <span class="md spoiler">The workers stabilized the **wall** that was probably going to collapse</span>
+- <TTS class="md">사람들이 모두 볼 수 있게 안내문을 **벽**에 붙였다</TTS>
+  - <span class="md spoiler">(I) posted (attached) an information sign on the **wall** so that all the people (can) see it</span>
+
+</Details>
+
+털 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2014/01/vLesson-7-11.mp3" /> = <span class="md spoiler">hair (not on head), fur</span>
+
+<Details>
+
+Common Usages:
+
+- <TTS>코털</TTS> = <span class="md spoiler">nose hair</span>
+- <TTS>깃털</TTS> = <span class="md spoiler">feathers</span>
+- <TTS>솜털</TTS> = <span class="md spoiler">soft, fine hair (“peach fuzz”)</span>
+
+Notes: In English, we say “hair” for all of the hair on our body. However, in Korean, 털 is used to refer to any hair that is not on your head. It is also used to refer to the fur of an animal.
+
+Examples:
+
+- <TTS class="md">저는 팔에 **털**이 많아요</TTS> = <span class="md spoiler">I have a lot of **hair** on my arms</span>
+- <TTS class="md">한국사람들이 가슴에 **털**이 없어요</TTS> = <span class="md spoiler">Korean people don’t have **hair** on their chest</span>
+- <TTS class="md">내일 해변에 갈 거라서 겨드랑이 **털**을 면도할 수밖에 없어요</TTS>
+  - <span class="md spoiler">I am going to the beach tomorrow, so I have no choice but to shave my **armpit hair**</span>
+- <TTS class="md">기린의 **털** 때문에 기린이 노란색 옷을 입은 것 같이 보였다. 나는 기린이 목이 길어서 무서울 줄 알았는데 오히려 귀여웠다.</TTS>
+  - <span class="md spoiler">Because of their **fur**, it looked like the giraffes were wearing yellow clothes. Giraffes have long necks, therefore I thought they would be scary, rather, they were cute.</span>
+
+</Details>
+
+머리카락 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2014/01/vLesson-7-12.mp3" /> = <span class="md spoiler">hair (on head)</span>
+
+<Details>
+
+Examples:
+
+- <TTS class="md">그 여자의 **머리카락**은 길어요</TTS> = <span class="md spoiler">That girl’s **hair** is long</span>
+- <TTS class="md">저의 **머리카락**을 꼬지 말아 달라고 했어요</TTS> = <span class="md spoiler">I told her to please stop twisting my **hair**</span>
+
+</Details>
+
+저녁 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2018/09/Lesson-7-8.mp3" /> = <span class="md spoiler">dinner, evening</span>
+
+<Details>
+
+Notes:
+
+The word “저녁” can refer to the evening time, or the meal that is eaten at that time (dinner). To distinguish between them, 저녁식사 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2014/01/vLesson-7-6.mp3" /> (dinner) and 저녁시간 (the evening) can also be used.
+
+Examples:
+
+- <TTS class="md">**저녁**으로 뭐 먹었어요?</TTS> = <span class="md spoiler">What did you eat for **dinner**?</span>
+- <TTS class="md">엄마가 온 후에 저는 **저녁식사**를 먹을 거예요</TTS> = <span class="md spoiler">After mom comes home, I will eat <strong>dinner</strong></span>
+- <TTS class="md">요리사들은 **저녁**을 부엌에서 준비했어요</TTS> = <span class="md spoiler">The chefs prepared the **dinner** in the kitchen</span>
+- <TTS class="md">저는 **저녁**에 공부했어요</TTS> = <span class="md spoiler">I studied in the <strong>evening</strong></span>
+- <TTS class="md">저는 일요일에 **저녁**을 안 먹었어요</TTS> = <span class="md spoiler">I didn’t eat **dinner** on Sunday</span>
+
+</Details>
+
+점심 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2018/09/Lesson7-9.mp3" /> = <span class="md spoiler">lunch, noonish</span>
+
+<Details>
+
+Notes:
+
+The word “점심” can refer to the time around noon, or the meal that is eaten at that time (lunch). To distinguish between them, 점심식사 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2014/01/vLesson-7-8.mp3" /> (lunch) and 점심시간 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2014/01/vLesson-7-9.mp3" /> (noonish) can also be used.
+
+Examples:
+
+- <TTS class="md">**점심**으로 뭐 먹고 싶어요?</TTS> = <span class="md spoiler">What do you want to eat for **lunch**?</span>
+- <TTS class="md">저는 보통 **점심식사**로 과일만 먹어요</TTS> = <span class="md spoiler">I usually only eat fruit for lunch</span>
+- <TTS class="md">**점심**은 어땠어요?</TTS> = <span class="md spoiler">How was **lunch**?</span>
+- <TTS class="md">**점심**을 먹었어?</TTS> = <span class="md spoiler">Did you eat **lunch**?</span>
+- <TTS class="md">오빠는 바닥에 앉아서 **점심**을 먹었어요</TTS> = <span class="md spoiler">My brother ate **lunch** sitting on the floor</span>
+
+</Details>
+
+옷 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2015/11/Lesson-7-v1.mp3" /> = <span class="md spoiler">clothes</span>
+
+<Details>
+
+Common Usages:
+
+- <TTS>옷을 입다</TTS> = <span class="md spoiler">to put on clothes</span>
+- <TTS>옷을 벗다</TTS> = <span class="md spoiler">to take off clothes</span>
+- <TTS>옷을 벗기다</TTS> = <span class="md spoiler">to take clothes off of another person</span>
+- <TTS>옷을 갈아입다</TTS> = <span class="md spoiler">to change clothes</span>
+- <TTS>비옷</TTS> = <span class="md spoiler">rain clothes</span>
+- <TTS>겉옷</TTS> = <span class="md spoiler">some kind of outer clothing</span>
+
+Notes: One way and one form of telling somebody to put on clothes is to say “옷 입어.” This sounds like “온 이버”
+
+Examples:
+
+- <TTS class="md">저는 저의 **옷**을 벗었어요</TTS> = <span class="md spoiler">I took off my <strong>clothes</strong></span>
+- <TTS class="md">저는 자주 **옷**을 충동적으로 사요</TTS> = <span class="md spoiler">I often buy **clothes** impulsively</span>
+- <TTS class="md">저는 따뜻한 **옷**을 입고 싶어요</TTS> = <span class="md spoiler">I want to wear (put on) warm **clothes**</span>
+- <TTS class="md">**옷**을 갈아입으러 탈의실에 갔어요</TTS> = <span class="md spoiler">He went to the change-room to change his <strong>clothes</strong></span>
+- <TTS class="md">여행할 때 **옷**을 많이 챙길 필요가 없어요</TTS> = <span class="md spoiler">I/you don’t need to pack a lot of **clothes** when you travel</span>
+- <TTS class="md">우리가 똑같은 **옷**을 입고 있어요</TTS> = <span class="md spoiler">We are wearing exactly the same **clothes**</span>
+
+</Details>
+
+오전 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2014/01/vLesson-7-39.mp3" /> = <span class="md spoiler">morning</span>
+
+<Details>
+
+Notes:
+
+This generally refers to any time before noon, but to refer to specifically refer to something early in the morning “새벽” can be used. “아침” refers to the time from breakfast until around noon.
+
+Examples:
+
+- 저는 내일 **오전**에 교회에 가야 돼요 = I have to go to church tomorrow in the <strong>morning</strong>
+- 우리 영업시간은 **오전** 8시부터 오후 5시까지입니다 = Our business hours are from 8 **am** to 5 pm
+- 오늘 일대일 면접이 오후에 있어서 **오전** 내내 면접 준비를 해야 해요 = Today I have a one on one interview in the afternoon, so all **morning** I need to prepare for it
+
+</Details>
+
+오후 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2014/01/vLesson-7-40.mp3" /> = <span class="md spoiler">afternoon</span>
+
+<Details>
+
+Notes: To refer to a time later than 5:00 or so “밤” or “저녁” would more commonly be used
+
+Examples:
+
+- **오후**에 뭐 할 거예요? = What are you doing in the **afternoon**?
+- 저는 오늘 **오후**에 낮잠을 잤어요 = I took a nap in the **afternoon** today
+- **오후**에 비가 올지 모르겠어요 = It might rain in the **afternoon** tomorrow
+- **오후**가 되면 햇살이 강해져요 = In the **afternoon**, the sun gets stronger
+- 우리 부장님께서 오늘 **오후**에 출발할 예정이십니다 = Our boss is scheduled to depart this <strong>afternoon</strong>
+- 이 의견에 동의하지 않는 사람은 제 사무실로 **오후**에 찾아오세요 = People who don’t agree with this opinion, please come and see (“find”) me in my office this **afternoon**
+
+</Details>
+
+여름 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2014/01/vLesson-7-42.mp3" /> = <span class="md spoiler">summer</span>
+
+<Details>
+
+Common Usages:
+여름 방학 = summer vacation
+
+Notes: For more information, words and sentences about seasons check out our [Weather Theme Lesson](https://www.howtostudykorean.com/theme/weather/).
+
+Examples:
+이번 **여름**은 너무 더워요 = This **summer** is too hot
+**여름**에 저는 공부하겠어요 = I will study in the <strong>summer</strong>
+논문을 **여름**까지 끝낼 수 없을까 봐 걱정돼요 = I’m worried that I won’t finish my thesis by <strong>summer</strong>
+놀이동산에 **여름**에는 사람이 많아요 = There are many people at the amusement park in the <strong>summer</strong>
+매년 **여름**, 이 지역에는 홍수가 나요 = A flood occurs every **summer** in this area
+
+한국에서는 겨울 방학이 **여름** 방학보다 더 길어요
+= In Korea, winter vacation is longer than **summer** vacation
+
+제가 **여름**을 제일 좋아하는 이유는 긴 휴가가 있기 때문이에요
+= The reason I like **summer** the most is because there is a long holiday
+
+</Details>
+
+가을 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2014/01/vLesson-7-43.mp3" /> = <span class="md spoiler">fall</span>
+
+<Details>
+
+Example:
+**가을**이 시원해서 좋아요 = **Fall** is nice because it is cool
+**가을**에 잎의 색깔은 변해요 = The color of the leaves changes in the **fall**
+**가을**에는 낙엽이 많이 떨어져요 = In the **fall**, a lot of leaves fall to the ground
+**가을**에는 단풍놀이를 가는 많은 사람들을 볼 수 있어요 = In the **fall**, you can see many people who go out to see the autumn colors
+
+</Details>
+
+겨울 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2014/01/vLesson-7-44.mp3" /> = <span class="md spoiler">winter</span>
+
+<Details>
+
+Common Usages:
+겨울 방학 = winter vacation
+겨울잠 = hibernation
+
+Example:
+너무 추워서 저는 **겨울**이 싫어요 = I don’t like **winter** because it is too cold
+캐나다는 **겨울**이 추운 나라예요 = Canada is a country of/with cold <strong>winters</strong>
+
+**겨울**에 한국 사람들이 문을 왜 안 닫는지 이해가 안 돼요
+= I don’t understand why Korean people don’t close the door in the **winter**
+
+피부가 너무 약해서 **겨울**에도 로션을 발라야 돼요
+= I even need to out on lotion in the **winter** because my skin is weak
+
+</Details>
+
+봄 <AudioButton src="https://www.howtostudykorean.com/wp-content/uploads/2014/01/vLesson-7-45.mp3" /> = <span class="md spoiler">spring</span>
+
+<Details>
+
+Example:
+
+- 나무는 **봄**에 예뻐요 = The trees are pretty in <strong>spring</strong>
+- 한국에는 황사가 중국에서 **봄**마다 와요 = Yellow dust comes to Korea every **spring** from China
+- **봄**에는 꽃가루 알레르기를 조심해 야 해요 = You need to be careful about pollen allergies in the **spring**
+
+</Details>
 
 ### Verbs: