quiz component

.vitepress/config.mts

@@ -1,4 +1,5 @@
 import { defineConfig } from "vitepress";
+import { VitePWA } from "vite-plugin-pwa";
 
 export default defineConfig({
   lang: "zh-CN",
@@ -10,6 +11,9 @@ export default defineConfig({
     },
   },
   vite: {
+    plugins: [
+      VitePWA({ registerType: "autoUpdate", devOptions: { enabled: true } }),
+    ],
     server: {
       port: 50156,
     },

.vitepress/theme/components/SentenceQuiz.vue

@@ -0,0 +1,59 @@
+<template>
+  <div id="sentence-quiz" ref="main" @click="nextSentence()">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { nextTick, onMounted, ref, useTemplateRef } from "vue";
+
+const mainEl = useTemplateRef("main");
+const sentences = ref<string[]>([]);
+const i_sentences = ref(NaN);
+
+function nextSentence() {
+  if (!mainEl.value) return;
+
+  const getShuffle = () => {
+    if (sentences.value.length <= 1) {
+      return sentences.value[0] || "";
+    }
+
+    if (++i_sentences.value < sentences.value.length) {
+      return sentences.value[i_sentences.value];
+    }
+
+    sentences.value = sentences.value
+      .map((s) => ({ s, k: Math.random() }))
+      .sort((a, b) => a.k - b.k)
+      .map((a) => a.s);
+
+    i_sentences.value = 0;
+    return sentences.value[i_sentences.value];
+  };
+
+  mainEl.value.innerHTML = getShuffle();
+}
+
+onMounted(() => {
+  nextTick(() => {
+    if (!mainEl.value) return;
+
+    sentences.value = Array.from(
+      mainEl.value.querySelectorAll("#sentence-quiz > ul > li"),
+    ).map((el) => el.innerHTML);
+
+    nextSentence();
+  });
+});
+</script>
+
+<style>
+#sentence-quiz {
+  margin-top: 1em;
+
+  &:hover li {
+    display: none;
+  }
+}
+</style>

.vitepress/theme/index.ts

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