move old contents in

docs/.vitepress/config.mts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vitepress'
+import { defineConfig } from "vitepress";
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -6,23 +6,8 @@ export default defineConfig({
   description: "Chinese grammar excerpts and interactive app",
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
-    nav: [
-      { text: 'Home', link: '/' },
-      { text: 'Examples', link: '/markdown-examples' }
-    ],
-
-    sidebar: [
-      {
-        text: 'Examples',
-        items: [
-          { text: 'Markdown Examples', link: '/markdown-examples' },
-          { text: 'Runtime API Examples', link: '/api-examples' }
-        ]
-      }
-    ],
-
-    socialLinks: [
-      { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
-    ]
-  }
-})
+    outline: {
+      level: "deep",
+    },
+  },
+});

docs/.vitepress/theme/components/SentenceQuiz.vue

@@ -0,0 +1,68 @@
+<template>
+  <div
+    id="sentence-quiz"
+    :class="$style.root"
+    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<number[]>([]);
+const i_sentences = ref(NaN);
+
+function nextSentence() {
+  if (!mainEl.value) return;
+
+  const getShuffle = () => {
+    if (sentences.value.length <= 1) {
+      return 0;
+    }
+
+    if (++i_sentences.value < sentences.value.length) {
+      return i_sentences.value;
+    }
+
+    sentences.value = sentences.value
+      .map((s) => ({ s, k: Math.random() }))
+      .sort((a, b) => a.k - b.k)
+      .map((a) => a.s);
+
+    return 0;
+  };
+
+  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(() => {
+  nextTick(() => {
+    if (!mainEl.value) return;
+
+    sentences.value = Array.from(
+      mainEl.value.querySelectorAll("#sentence-quiz > ul > li"),
+    ).map((el, i) => i);
+
+    nextSentence();
+  });
+});
+</script>
+
+<style module>
+.root {
+  margin-top: 1em;
+
+  &:hover li li {
+    display: none;
+  }
+}
+</style>

docs/.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>

docs/.vitepress/theme/custom.css

@@ -0,0 +1,13 @@
+.pinyin {
+  font-style: italic;
+  opacity: 0.15;
+}
+
+.wrong {
+  color: red;
+  margin-left: 2em;
+
+  &:not(:hover) {
+    opacity: 0.5;
+  }
+}

docs/.vitepress/theme/index.ts

@@ -1,17 +1,24 @@
-// 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 "./custom.css";
 
+import DefaultTheme from "vitepress/theme";
+// https://vitepress.dev/guide/custom-theme
+import { h } from "vue";
+
+import SentenceQuiz from "./components/SentenceQuiz.vue";
+import TOC from "./components/TOC.vue";
+
+import type { Theme } from "vitepress";
 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("SentenceQuiz", SentenceQuiz);
+    app.component("TOC", TOC);
+  },
+} satisfies Theme;