add components

.vitepress/config.mts

@@ -9,11 +9,10 @@ export default defineConfig({
         dateStyle: "full",
       },
     },
+    outline: { level: "deep" },
   },
   vite: {
-    plugins: [
-      VitePWA({ registerType: "autoUpdate", devOptions: { enabled: true } }),
-    ],
+    plugins: [VitePWA({ registerType: "autoUpdate" })],
     server: {
       port: 50156,
     },

.vitepress/theme/components/SentenceQuiz.vue

@@ -1,5 +1,10 @@
 <template>
-  <div id="sentence-quiz" ref="main" @click="nextSentence()">
+  <div
+    id="sentence-quiz"
+    :class="$style.root"
+    ref="main"
+    @click="nextSentence()"
+  >
     <slot />
   </div>
 </template>
@@ -8,7 +13,7 @@
 import { nextTick, onMounted, ref, useTemplateRef } from "vue";
 
 const mainEl = useTemplateRef("main");
-const sentences = ref<string[]>([]);
+const sentences = ref<number[]>([]);
 const i_sentences = ref(NaN);
 
 function nextSentence() {
@@ -16,11 +21,11 @@ function nextSentence() {
 
   const getShuffle = () => {
     if (sentences.value.length <= 1) {
-      return sentences.value[0] || "";
+      return 0;
     }
 
     if (++i_sentences.value < sentences.value.length) {
-      return sentences.value[i_sentences.value];
+      return i_sentences.value;
     }
 
     sentences.value = sentences.value
@@ -28,11 +33,15 @@ function nextSentence() {
       .sort((a, b) => a.k - b.k)
       .map((a) => a.s);
 
-    i_sentences.value = 0;
-    return sentences.value[i_sentences.value];
+    return 0;
   };
 
-  mainEl.value.innerHTML = getShuffle();
+  i_sentences.value = getShuffle();
+
+  mainEl.value.querySelectorAll("#sentence-quiz > ul > li").forEach((el, i) => {
+    if (!(el instanceof HTMLElement)) return;
+    el.style.display = i === i_sentences.value ? "" : "none";
+  });
 }
 
 onMounted(() => {
@@ -41,18 +50,18 @@ onMounted(() => {
 
     sentences.value = Array.from(
       mainEl.value.querySelectorAll("#sentence-quiz > ul > li"),
-    ).map((el) => el.innerHTML);
+    ).map((el, i) => i);
 
     nextSentence();
   });
 });
 </script>
 
-<style>
-#sentence-quiz {
+<style module>
+.root {
   margin-top: 1em;
 
-  &:hover li {
+  &:hover li li {
     display: none;
   }
 }

.vitepress/theme/components/TOC.vue

@@ -0,0 +1,16 @@
+<template>
+  <details>
+    <summary>{{ $props.summary }}</summary>
+    <blockquote cite="">
+      <slot></slot>
+    </blockquote>
+  </details>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  summary?: string;
+}>();
+</script>
+
+<style scoped></style>

.vitepress/theme/custom.css

@@ -0,0 +1,4 @@
+.pinyin {
+  font-style: italic;
+  opacity: 0.15;
+}

.vitepress/theme/index.ts

@@ -2,10 +2,14 @@ import type { Theme } from "vitepress";
 import DefaultTheme from "vitepress/theme";
 import SentenceQuiz from "./components/SentenceQuiz.vue";
 
+import "./custom.css";
+import TOC from "./components/TOC.vue";
+
 export default {
   extends: DefaultTheme,
   enhanceApp({ app }) {
     // register your custom global components
     app.component("SentenceQuiz", SentenceQuiz);
+    app.component("TOC", TOC);
   },
 } satisfies Theme;