youtube and PDF frame

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

@@ -18,7 +18,9 @@ defineProps<{
   margin-top: -1em !important;
 }
 
-.inner p {
-  margin: 16px 0;
+.inner {
+  p {
+    margin: 16px 0 !important;
+  }
 }
 </style>

docs/.vitepress/theme/components/Frame.vue

@@ -0,0 +1,30 @@
+<template>
+  <div :class="$style.container">
+    <iframe
+      :class="$style.iframe"
+      :src="src"
+      frameborder="0"
+      width="100%"
+      height="100%"
+    ></iframe>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{ src: string }>();
+</script>
+
+<style module>
+.container {
+  padding-bottom: 120%;
+  position: relative;
+}
+
+.iframe {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+}
+</style>

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

@@ -13,7 +13,7 @@
 import { useTemplateRef } from "vue";
 import { speak, getVoices } from "tauri-plugin-tts-api";
 
-const { lang = "ko" } = defineProps<{
+const { lang = "ko-KR" } = defineProps<{
   class?: string;
   lang?: string;
 }>();
@@ -27,6 +27,7 @@ async function playAudio() {
   if (!voices.length) return;
 
   const v = voices[Math.floor(Math.random() * voices.length)];
+  console.log(JSON.stringify(v));
   await speak({
     text: mainEl.value.innerText,
     language: null,

docs/.vitepress/theme/components/YouTube.vue

@@ -0,0 +1,39 @@
+<template>
+  <div :class="$style.container">
+    <iframe
+      :class="$style.iframe"
+      width="100%"
+      height="100%"
+      :src="'https://www.youtube.com/embed/' + $props.id"
+      frameborder="0"
+      allow="
+        accelerometer;
+        autoplay;
+        encrypted-media;
+        gyroscope;
+        picture-in-picture;
+        fullscreen;
+      "
+    >
+    </iframe>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{ id: string; title?: string }>();
+</script>
+
+<style module>
+.container {
+  padding-bottom: 56.25%;
+  position: relative;
+}
+
+.iframe {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+}
+</style>

docs/.vitepress/theme/index.ts

@@ -6,10 +6,13 @@ import DefaultTheme from "vitepress/theme";
 import { h } from "vue";
 
 import AudioButton from "./components/AudioButton.vue";
+import Details from "./components/Details.vue";
+import Frame from "./components/Frame.vue";
+import TTS from "./components/TTS.vue";
+import YouTube from "./components/YouTube.vue";
 
 import type { Theme } from "vitepress";
-import Details from "./components/Details.vue";
-import TTS from "./components/TTS.vue";
+
 export default {
   extends: DefaultTheme,
   Layout: () => {
@@ -22,5 +25,7 @@ export default {
     app.component("AudioButton", AudioButton);
     app.component("Details", Details);
     app.component("TTS", TTS);
+    app.component("YouTube", YouTube);
+    app.component("Frame", Frame);
   },
 } satisfies Theme;