first commit.

docs/.vitepress/theme/components/Author.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="author">
+    <img class="photo" :src="'/avatars/' + name + '.svg'" alt="avatar" />
+    <div class="intro">
+      <span class="name">{{ name }}</span>
+      <span class="title">{{ title }}</span>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+interface Props {
+  name: string
+  title: string
+}
+defineProps<Props>()
+</script>
+<style scoped>
+.author {
+  display: inline-flex;
+  margin: 2rem 4rem 0 0;
+}
+
+.photo {
+  width: 3rem;
+  height: 3rem;
+  margin-right: 1rem;
+}
+
+.intro {
+  display: flex;
+  flex-direction: column;
+}
+.name {
+  font-weight: bold;
+}
+</style>

docs/.vitepress/theme/components/BVideo.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="video">
+    <iframe :src="url"></iframe>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed } from "vue"
+interface Props {
+  src: string
+  p?: number
+}
+
+const props = defineProps<Props>()
+const url = computed(() => {
+  let url = `https://player.bilibili.com/player.html?bvid=${props.src}`
+  if (props.p) {
+    url += `&page=${props.p}`
+  }
+  return url
+})
+</script>
+<style scoped>
+.video {
+  position: relative;
+  width: 100%;
+  padding-bottom: calc(56.25% + 68px);
+}
+
+.video > iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+</style>

docs/.vitepress/theme/components/CodeEditor.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { computed, ref } from "vue"
+import { useData } from "vitepress"
+import { Codemirror } from "vue-codemirror"
+import { cpp } from "@codemirror/lang-cpp"
+import { python } from "@codemirror/lang-python"
+import { EditorView } from "@codemirror/view"
+import { VPButton } from "vitepress/theme"
+import { oneDark } from "../codemirror/oneDark"
+import { smoothy } from "../codemirror/smoothy"
+import { asyncRun } from "./py"
+
+interface Props {
+  modelValue: string
+  lang?: "python" | "c"
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  lang: "python",
+})
+
+const { isDark } = useData()
+
+const lang = computed(() => {
+  if (props.lang === "python") {
+    return python()
+  }
+  return cpp()
+})
+
+const styleTheme = EditorView.baseTheme({
+  "& .cm-scroller": {
+    "font-family": "Consolas",
+  },
+  "&.cm-editor.cm-focused": {
+    outline: "none",
+  },
+})
+
+const input = ref("")
+const output = ref("")
+const code = ref(props.modelValue)
+
+async function run() {
+  const ev = await asyncRun(code.value, input.value)
+  output.value = ev.result
+}
+
+function reset() {
+  code.value = props.modelValue
+}
+</script>
+<template>
+  <p>代码编辑区</p>
+  <Codemirror
+    v-model="code"
+    indentWithTab
+    :extensions="[styleTheme, lang, isDark ? oneDark : smoothy]"
+    :tabSize="4"
+  />
+  <p>输入框</p>
+  <Codemirror
+    v-model="input"
+    indentWithTab
+    :extensions="[styleTheme, isDark ? oneDark : smoothy]"
+    :tabSize="4"
+  />
+  <p>结果</p>
+  <p>{{ output }}</p>
+  <div :class="$style.actions">
+    <VPButton :class="$style.run" @click="run" text="运行"></VPButton>
+    <VPButton @click="reset" theme="alt" text="重置"></VPButton>
+  </div>
+</template>
+<style module>
+.actions {
+  margin-top: 20px;
+}
+
+.run {
+  margin-right: 20px;
+}
+</style>

docs/.vitepress/theme/components/py.ts

@@ -0,0 +1,24 @@
+const worker = new Worker("/worker.js")
+
+const callbacks = {}
+
+worker.onmessage = (event) => {
+  const { id, ...data } = event.data
+  const onSuccess = callbacks[id]
+  delete callbacks[id]
+  onSuccess(data)
+}
+
+const asyncRun = (() => {
+  let id = 0 // identify a Promise
+  return (python: string, input: string) => {
+    // the id could be generated more carefully
+    id = (id + 1) % Number.MAX_SAFE_INTEGER
+    return new Promise<{ result: string; error: string }>((onSuccess) => {
+      callbacks[id] = onSuccess
+      worker.postMessage({ python, input, id })
+    })
+  }
+})()
+
+export { asyncRun }