lesson 7

docs/.vitepress/theme/components/AudioButton.vue

@@ -0,0 +1,24 @@
+<template>
+  <span>
+    <button type="button" @click="playAudio()">▶️</button>
+    <audio ref="audio" style="display: none"></audio>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { useTemplateRef } from "vue";
+
+const props = defineProps<{
+  src: string;
+}>();
+
+const audioEl = useTemplateRef("audio");
+
+function playAudio() {
+  if (!audioEl.value) return;
+  audioEl.value.src = props.src;
+  audioEl.value.play();
+}
+</script>
+
+<style module></style>

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

@@ -0,0 +1,20 @@
+<template>
+  <details>
+    <summary :class="$style.summary">{{ summary }}</summary>
+    <blockquote>
+      <slot />
+    </blockquote>
+  </details>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  summary?: string;
+}>();
+</script>
+
+<style module>
+.summary {
+  margin-top: -1em !important;
+}
+</style>

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

@@ -0,0 +1,34 @@
+<template>
+  <span>
+    <span ref="main">
+      <slot />
+    </span>
+    <span>
+      <button type="button" @click="playAudio()">▶️</button>
+    </span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { useTemplateRef } from "vue";
+
+const { lang = "ko" } = defineProps<{
+  lang?: string;
+}>();
+
+const mainEl = useTemplateRef("main");
+
+async function playAudio() {
+  if (!mainEl.value) return;
+  const voices = speechSynthesis
+    .getVoices()
+    .filter((v) => v.lang.split(/[-_]/)[0] === lang);
+  if (!voices.length) return;
+
+  const u = new SpeechSynthesisUtterance(mainEl.value.innerText);
+  u.voice = voices[Math.floor(Math.random() * voices.length)];
+  speechSynthesis.speak(u);
+}
+</script>
+
+<style module></style>

docs/.vitepress/theme/index.ts

@@ -1,17 +1,25 @@
-// https://vitepress.dev/guide/custom-theme
-import { h } from 'vue'
-import type { Theme } from 'vitepress'
-import DefaultTheme from 'vitepress/theme'
-import './style.css'
+import "./style.css";
 
+import DefaultTheme from "vitepress/theme";
+// https://vitepress.dev/guide/custom-theme
+import { h } from "vue";
+
+import AudioButton from "./components/AudioButton.vue";
+
+import type { Theme } from "vitepress";
+import Details from "./components/Details.vue";
+import TTS from "./components/TTS.vue";
 export default {
   extends: DefaultTheme,
   Layout: () => {
     return h(DefaultTheme.Layout, null, {
       // https://vitepress.dev/guide/extending-default-theme#layout-slots
-    })
+    });
   },
   enhanceApp({ app, router, siteData }) {
     // ...
-  }
-} satisfies Theme
+    app.component("AudioButton", AudioButton);
+    app.component("Details", Details);
+    app.component("TTS", TTS);
+  },
+} satisfies Theme;