add components

.vitepress/config.mts

@@ -9,11 +9,10 @@ export default defineConfig({
         dateStyle: "full",
       },
     },
+    outline: { level: "deep" },
   },
   vite: {
-    plugins: [
+    plugins: [VitePWA({ registerType: "autoUpdate" })],
-      VitePWA({ registerType: "autoUpdate", devOptions: { enabled: true } }),
-    ],
     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 0;
-    return sentences.value[i_sentences.value];
   };
 
-  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>
+<style module>
-#sentence-quiz {
+.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;

_post/grammar/allsetlearning/B2/倒.md

@@ -0,0 +1,112 @@
+# Expressing contrariness with "倒"
+
+<SentenceQuiz>
+
+- 我 帮 他， _倒_ 不 是 因为 喜欢 他，是 因为 他 工作 很 努力 。
+  <!-- - <span class="pinyin">Wǒ bāng tā, **_dào_** bù shì yīnwèi xǐhuan tā, shì yīnwèi tā gōngzuò hěn nǔlì.</span> -->
+  - I helped him not because I liked him, but because he worked very hard.
+- 他 不 是 很 努力 ，成绩 _倒_ 也 不错 。
+  <!-- - <span class="pinyin">Tā bù shì hěn nǔlì, chéngjì **_dào_** yě bùcuò.</span> -->
+  - He's not very hard-working, but his scores also aren't bad.
+- 已经 是 春天 了，_倒_ 又 冷 起来 了。
+  <!-- - Yǐjīng shì chūntiān le, _dào_ yòu lěng qǐlái le. -->
+  - It's already spring, but it's actually getting colder.
+- 不 吃 药 ，病 _倒_ 慢慢 好 了。
+  <!-- - Bù chī yào, bìng _dào_ mànman hǎo le. -->
+  - Without taking any medicine, I'm actually slowly getting better.
+- 英语 不 是 他 的 母语 ，他 说 得 _倒_ 挺 地道 的 。
+  <!-- - Yīngyǔ bù shì tā de mǔyǔ, tā shuō de _dào_ tǐng dìdao de. -->
+  - English is not his mother language, but he speaks quite native-like.
+- 我 _倒_ 是 想 去 旅游 ，**但是** 现在 太 忙 了，没有 时间 。
+  <!-- - Wǒ _dào_ shì xiǎng qù lǚyóu, dànshì xiànzài tài máng le, méiyǒu shíjiān. -->
+  - I do want to go on a trip, but I am too busy to do so now.
+- 这 篇 文章 的 内容 _倒_ 不错 ，**就是** 太 长 了 。
+  <!-- - Zhè piān wénzhāng de nèiróng _dào_ bùcuò, **jiùshì** tài cháng le. -->
+  - The content of this article is great, but it's just too long.
+- 这 件 衣服 的 样式 和 大小 _倒_ 都 合适 ，**可是** 我 不 喜欢 这 个 颜色 。
+  <!-- - Zhè jiàn yīfu de yàngshì hé dàxiǎo _dào_ dōu héshì, **kěshì** wǒ bù xǐhuan zhège yánsè. -->
+  - The style and size of this piece of clothing actually work well, but I don't like the color.
+- 你们 的 服务 _倒_ 不错 ，**但是** 对 我 来说 太 贵 了 。
+  <!-- - Nǐmen de fúwù _dào_ bùcuò, **dànshì** duì wǒ lái shuō tài guì le. -->
+  - Your service is great, but it's too expensive for me.
+- 我 _倒_ 想 陪 你 一起 去 ，**不过** 要 等 到 周末 。
+  <!-- - Wǒ _dào_ xiǎng péi nǐ yīqǐ qù, **bùguò** yào děngdào zhōumò. -->
+  - I really would like to go with you, but you would need to wait until the weekend.
+
+</SentenceQuiz>
+
+<TOC>
+
+- Level: [B2](https://resources.allsetlearning.com/chinese/grammar/B2_grammar_points) / [HSK4](https://resources.allsetlearning.com/chinese/grammar/HSK4_grammar_points)
+- Similar to
+  - [Expressing "on the contrary" with "反而"](https://resources.allsetlearning.com/chinese/grammar/Expressing_%22on_the_contrary%22_with_%22fan%27er%22) (B2)
+  - [The "however" adverb "却"](https://resources.allsetlearning.com/chinese/grammar/The_%22however%22_adverb_%22que%22) (B2)
+- Used for: [Contrasting](https://resources.allsetlearning.com/chinese/grammar/Contrasting)
+- Keywords: [倒](https://resources.allsetlearning.com/chinese/grammar/%E5%80%92)
+
+</TOC>
+
+倒 (dào) can be used to express something is contrary to expectations, acting as a turning point in the sentence. It is generally followed by a positive comment.
+
+## Using 倒 as "However"
+
+倒 can be used to express an unexpected situation. Note that 倒 is often followed by 也 or 又 to add further emphasis.
+
+### Structure
+
+⋯⋯ ，Subj. + 倒 + (也 / 又) ⋯⋯
+
+### Examples
+
+Sometimes "actually" works well in translations to indicate the contrast between expectation and reality.
+
+- 我 帮 他， _倒_ 不 是 因为 喜欢 他，是 因为 他 工作 很 努力 。
+  <!-- - <span class="pinyin">Wǒ bāng tā, **_dào_** bù shì yīnwèi xǐhuan tā, shì yīnwèi tā gōngzuò hěn nǔlì.</span> -->
+  - I helped him not because I liked him, but because he worked very hard.
+- 他 不 是 很 努力 ，成绩 _倒_ 也 不错 。
+  <!-- - <span class="pinyin">Tā bù shì hěn nǔlì, chéngjì **_dào_** yě bùcuò.</span> -->
+  - He's not very hard-working, but his scores also aren't bad.
+- 已经 是 春天 了，_倒_ 又 冷 起来 了。
+  <!-- - Yǐjīng shì chūntiān le, _dào_ yòu lěng qǐlái le. -->
+  - It's already spring, but it's actually getting colder.
+- 不 吃 药 ，病 _倒_ 慢慢 好 了。
+  <!-- - Bù chī yào, bìng _dào_ mànman hǎo le. -->
+  - Without taking any medicine, I'm actually slowly getting better.
+- 英语 不 是 他 的 母语 ，他 说 得 _倒_ 挺 地道 的 。
+  <!-- - Yīngyǔ bù shì tā de mǔyǔ, tā shuō de _dào_ tǐng dìdao de. -->
+  - English is not his mother language, but he speaks quite native-like.
+
+## Using 倒 as "Despite"
+
+### Structure
+
+倒 can also be used to express a concession, mostly emphasizing the positive side. 就是、但是、可是、不过 are often used to precede the undesirable reality the speaker is calling attention to.
+
+Subj. + 倒 ⋯⋯ ，不过 / 但是 / 就是 ⋯⋯
+
+### Examples
+
+- 我 _倒_ 是 想 去 旅游 ，**但是** 现在 太 忙 了，没有 时间 。
+  <!-- - Wǒ _dào_ shì xiǎng qù lǚyóu, dànshì xiànzài tài máng le, méiyǒu shíjiān. -->
+  - I do want to go on a trip, but I am too busy to do so now.
+- 这 篇 文章 的 内容 _倒_ 不错 ，**就是** 太 长 了 。
+  <!-- - Zhè piān wénzhāng de nèiróng _dào_ bùcuò, **jiùshì** tài cháng le. -->
+  - The content of this article is great, but it's just too long.
+- 这 件 衣服 的 样式 和 大小 _倒_ 都 合适 ，**可是** 我 不 喜欢 这 个 颜色 。
+  <!-- - Zhè jiàn yīfu de yàngshì hé dàxiǎo _dào_ dōu héshì, **kěshì** wǒ bù xǐhuan zhège yánsè. -->
+  - The style and size of this piece of clothing actually work well, but I don't like the color.
+- 你们 的 服务 _倒_ 不错 ，**但是** 对 我 来说 太 贵 了 。
+  <!-- - Nǐmen de fúwù _dào_ bùcuò, **dànshì** duì wǒ lái shuō tài guì le. -->
+  - Your service is great, but it's too expensive for me.
+- 我 _倒_ 想 陪 你 一起 去 ，**不过** 要 等 到 周末 。
+  <!-- - Wǒ _dào_ xiǎng péi nǐ yīqǐ qù, **bùguò** yào děngdào zhōumò. -->
+  - I really would like to go with you, but you would need to wait until the weekend.
+
+For more on [倒](https://resources.allsetlearning.com/chinese/grammar/%E5%80%92), be sure to check our C1 grammar point on even more [advanced uses of 倒](https://resources.allsetlearning.com/chinese/grammar/Advanced_usages_of_the_contrary_%22dao%22).
+
+## See also
+
+- Expressing contrariness with "dao"
+- [The "However" Adverb "que"](https://resources.allsetlearning.com/chinese/grammar/The_%22However%22_Adverb_%22que%22)
+- ["On the Contrary" with "fan'er"](https://resources.allsetlearning.com/chinese/grammar/%22On_the_Contrary%22_with_%22fan%27er%22)
+- [Conceding a Point with "shi"](https://resources.allsetlearning.com/chinese/grammar/Conceding_a_Point_with_%22shi%22)

_post/grammar/allsetlearning/C1/倒.md

@@ -29,31 +29,17 @@
 
 </SentenceQuiz>
 
-<details>
+<TOC>
-<summary>TOC</summary>
 
 (Redirected from [ASGXXP6M](https://resources.allsetlearning.com/gramwiki/?title=ASGXXP6M&redirect=no))
 
+- Related: [B2/倒](/_post/grammar/allsetlearning/B2/倒)
 - Level: [C1](https://resources.allsetlearning.com/chinese/grammar/C1_grammar_points) / [HSK6](https://resources.allsetlearning.com/chinese/grammar/HSK6_grammar_points)
 - Similar to:
 - Used for: [Contrasting](https://resources.allsetlearning.com/chinese/grammar/Contrasting), [Expressing attitude](https://resources.allsetlearning.com/chinese/grammar/Expressing_attitude)
 - Keywords: [倒](https://resources.allsetlearning.com/chinese/grammar/%E5%80%92)
 
-## Contents
+</TOC>
-
-- [1 Indicating A Rebuking Tone with 倒](https://resources.allsetlearning.com/chinese/grammar/Advanced_usages_of_the_contrary_%22dao%22#Indicating_A_Rebuking_Tone_with_.E5.80.92)
-  - [1.1 Structure](https://resources.allsetlearning.com/chinese/grammar/Advanced_usages_of_the_contrary_%22dao%22#Structure)
-  - [1.2 Examples](https://resources.allsetlearning.com/chinese/grammar/Advanced_usages_of_the_contrary_%22dao%22#Examples)
-- [2 Giving An Emphasis with 倒](https://resources.allsetlearning.com/chinese/grammar/Advanced_usages_of_the_contrary_%22dao%22#Giving_An_Emphasis_with_.E5.80.92)
-  - [2.1 Used in An Affirmative Sentence](https://resources.allsetlearning.com/chinese/grammar/Advanced_usages_of_the_contrary_%22dao%22#Used_in_An_Affirmative_Sentence)
-  - [2.2 Used in A Negative Sentence](https://resources.allsetlearning.com/chinese/grammar/Advanced_usages_of_the_contrary_%22dao%22#Used_in_A_Negative_Sentence)
-- [3 Using 倒是 in An Imperative Sentence](https://resources.allsetlearning.com/chinese/grammar/Advanced_usages_of_the_contrary_%22dao%22#Using_.E5.80.92.E6.98.AF_in_An_Imperative_Sentence)
-  - [3.1 Structure](https://resources.allsetlearning.com/chinese/grammar/Advanced_usages_of_the_contrary_%22dao%22#Structure_2)
-  - [3.2 Examples](https://resources.allsetlearning.com/chinese/grammar/Advanced_usages_of_the_contrary_%22dao%22#Examples_2)
-- [4 Sources and further reading](https://resources.allsetlearning.com/chinese/grammar/Advanced_usages_of_the_contrary_%22dao%22#Sources_and_further_reading)
-  - [4.1 Books](https://resources.allsetlearning.com/chinese/grammar/Advanced_usages_of_the_contrary_%22dao%22#Books)
-
-</details>
 
 ## Indicating A Rebuking Tone with 倒
 

package.json

@@ -4,7 +4,9 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "vp": "vitepress dev --open",
+    "vp:web": "vitepress dev",
+    "vp:node": "node webview.js",
+    "vp": "concurrently pnpm:vp:*",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
@@ -15,6 +17,8 @@
     "vue": "^3.5.30"
   },
   "devDependencies": {
-    "vite-plugin-pwa": "^1.2.0"
+    "concurrently": "^9.2.1",
+    "vite-plugin-pwa": "^1.2.0",
+    "webview-nodejs": "^0.4.3"
   }
 }

pnpm-workspace.yaml

@@ -1,2 +1,3 @@
 onlyBuiltDependencies:
   - esbuild
+  - libwebview-nodejs

webview.js

@@ -0,0 +1,7 @@
+const { Webview } = require("webview-nodejs");
+
+let w = new Webview();
+w.title("zhdiary");
+w.size(1920, 1280);
+w.navigate("http://localhost:50156");
+w.show();