first commit.

docs/.vitepress/theme/codemirror/createTheme.ts

@@ -0,0 +1,110 @@
+import { EditorView } from "@codemirror/view"
+import { Extension } from "@codemirror/state"
+import {
+  HighlightStyle,
+  TagStyle,
+  syntaxHighlighting,
+} from "@codemirror/language"
+
+interface Options {
+  /**
+   * Theme variant. Determines which styles CodeMirror will apply by default.
+   */
+  variant: Variant
+
+  /**
+   * Settings to customize the look of the editor, like background, gutter, selection and others.
+   */
+  settings: Settings
+
+  /**
+   * Syntax highlighting styles.
+   */
+  styles: TagStyle[]
+}
+
+type Variant = "light" | "dark"
+
+interface Settings {
+  /**
+   * Editor background.
+   */
+  background: string
+
+  /**
+   * Default text color.
+   */
+  foreground: string
+
+  /**
+   * Caret color.
+   */
+  caret: string
+
+  /**
+   * Selection background.
+   */
+  selection: string
+
+  /**
+   * Background of highlighted lines.
+   */
+  lineHighlight: string
+
+  /**
+   * Gutter background.
+   */
+  gutterBackground: string
+
+  /**
+   * Text color inside gutter.
+   */
+  gutterForeground: string
+
+  gutterBorderRight: string
+}
+
+export const createTheme = ({
+  variant,
+  settings,
+  styles,
+}: Options): Extension => {
+  const theme = EditorView.theme(
+    {
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      "&": {
+        backgroundColor: settings.background,
+        color: settings.foreground,
+      },
+      ".cm-content": {
+        caretColor: settings.caret,
+      },
+      ".cm-cursor, .cm-dropCursor": {
+        borderLeftColor: settings.caret,
+      },
+      "&.cm-focused .cm-selectionBackgroundm .cm-selectionBackground, .cm-content ::selection":
+        {
+          backgroundColor: settings.selection,
+        },
+      ".cm-activeLine": {
+        backgroundColor: settings.lineHighlight,
+      },
+      ".cm-gutters": {
+        backgroundColor: settings.gutterBackground,
+        borderRight: settings.gutterBorderRight,
+        color: settings.gutterForeground,
+      },
+      ".cm-activeLineGutter": {
+        backgroundColor: settings.lineHighlight,
+      },
+    },
+    {
+      dark: variant === "dark",
+    },
+  )
+
+  const highlightStyle = HighlightStyle.define(styles)
+  const extension = [theme, syntaxHighlighting(highlightStyle)]
+
+  return extension
+}

docs/.vitepress/theme/codemirror/oneDark.ts

@@ -0,0 +1,149 @@
+import { EditorView } from "@codemirror/view"
+import { Extension } from "@codemirror/state"
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language"
+import { tags as t } from "@lezer/highlight"
+
+// Using https://github.com/one-dark/vscode-one-dark-theme/ as reference for the colors
+
+const chalky = "#e5c07b",
+  coral = "#e06c75",
+  cyan = "#56b6c2",
+  invalid = "#ffffff",
+  ivory = "#abb2bf",
+  stone = "#7d8799", // Brightened compared to original to increase contrast
+  malibu = "#61afef",
+  sage = "#98c379",
+  whiskey = "#d19a66",
+  violet = "#c678dd",
+  darkBackground = "#26262a",
+  highlightBackground = "#2c313a",
+  background = "#101014", // naive-ui
+  tooltipBackground = "#353a42",
+  selection = "#3E4451",
+  cursor = "#528bff"
+
+/// The editor theme styles for One Dark.
+const oneDarkTheme = EditorView.theme(
+  {
+    "&": {
+      color: ivory,
+      backgroundColor: background,
+    },
+
+    ".cm-content": {
+      caretColor: cursor,
+    },
+
+    ".cm-cursor, .cm-dropCursor": { borderLeftColor: cursor },
+    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
+      { backgroundColor: selection },
+
+    ".cm-panels": { backgroundColor: darkBackground, color: ivory },
+    ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
+    ".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
+
+    ".cm-searchMatch": {
+      backgroundColor: "#72a1ff59",
+      outline: "1px solid #457dff",
+    },
+    ".cm-searchMatch.cm-searchMatch-selected": {
+      backgroundColor: "#6199ff2f",
+    },
+
+    ".cm-activeLine": { backgroundColor: "#6699ff0b" },
+    ".cm-selectionMatch": { backgroundColor: "#aafe661a" },
+
+    "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
+      backgroundColor: "#bad0f847",
+    },
+
+    ".cm-gutters": {
+      backgroundColor: background,
+      color: stone,
+      border: "none",
+    },
+
+    ".cm-activeLineGutter": {
+      backgroundColor: highlightBackground,
+    },
+
+    ".cm-foldPlaceholder": {
+      backgroundColor: "transparent",
+      border: "none",
+      color: "#ddd",
+    },
+
+    ".cm-tooltip": {
+      border: "none",
+      backgroundColor: tooltipBackground,
+    },
+    ".cm-tooltip .cm-tooltip-arrow:before": {
+      borderTopColor: "transparent",
+      borderBottomColor: "transparent",
+    },
+    ".cm-tooltip .cm-tooltip-arrow:after": {
+      borderTopColor: tooltipBackground,
+      borderBottomColor: tooltipBackground,
+    },
+    ".cm-tooltip-autocomplete": {
+      "& > ul > li[aria-selected]": {
+        backgroundColor: highlightBackground,
+        color: ivory,
+      },
+    },
+  },
+  { dark: true },
+)
+
+/// The highlighting style for code in the One Dark theme.
+const oneDarkHighlightStyle = HighlightStyle.define([
+  { tag: t.keyword, color: violet },
+  {
+    tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
+    color: coral,
+  },
+  { tag: [t.function(t.variableName), t.labelName], color: malibu },
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: whiskey },
+  { tag: [t.definition(t.name), t.separator], color: ivory },
+  {
+    tag: [
+      t.typeName,
+      t.className,
+      t.number,
+      t.changed,
+      t.annotation,
+      t.modifier,
+      t.self,
+      t.namespace,
+    ],
+    color: chalky,
+  },
+  {
+    tag: [
+      t.operator,
+      t.operatorKeyword,
+      t.url,
+      t.escape,
+      t.regexp,
+      t.link,
+      t.special(t.string),
+    ],
+    color: cyan,
+  },
+  { tag: [t.meta, t.comment], color: stone },
+  { tag: t.strong, fontWeight: "bold" },
+  { tag: t.emphasis, fontStyle: "italic" },
+  { tag: t.strikethrough, textDecoration: "line-through" },
+  { tag: t.link, color: stone, textDecoration: "underline" },
+  { tag: t.heading, fontWeight: "bold", color: coral },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: whiskey },
+  { tag: [t.processingInstruction, t.string, t.inserted], color: sage },
+  { tag: t.invalid, color: invalid },
+])
+
+/// Extension to enable the One Dark theme (both the editor theme and
+/// the highlight style).
+export const oneDark: Extension = [
+  oneDarkTheme,
+  syntaxHighlighting(oneDarkHighlightStyle),
+]

docs/.vitepress/theme/codemirror/smoothy.ts

@@ -0,0 +1,83 @@
+import { tags as t } from "@lezer/highlight"
+import { createTheme } from "./createTheme"
+
+// Author: Kenneth Reitz
+export const smoothy = createTheme({
+  variant: "light",
+  settings: {
+    background: "#FFFFFF",
+    foreground: "#000000",
+    caret: "#000000",
+    selection: "#FFFD0054",
+    gutterBackground: "#FFFFFF",
+    gutterForeground: "#00000070",
+    gutterBorderRight: "none",
+    lineHighlight: "#00000008",
+  },
+  styles: [
+    {
+      tag: t.comment,
+      color: "#CFCFCF",
+    },
+    {
+      tag: [t.number, t.bool, t.null],
+      color: "#E66C29",
+    },
+    {
+      tag: [
+        t.className,
+        t.definition(t.propertyName),
+        t.function(t.variableName),
+        t.labelName,
+        t.definition(t.typeName),
+      ],
+      color: "#2EB43B",
+    },
+    {
+      tag: t.keyword,
+      color: "#D8B229",
+    },
+    {
+      tag: t.operator,
+      color: "#4EA44E",
+      fontWeight: "bold",
+    },
+    {
+      tag: [t.definitionKeyword, t.modifier],
+      color: "#925A47",
+    },
+    {
+      tag: t.string,
+      color: "#704D3D",
+    },
+    {
+      tag: t.typeName,
+      color: "#2F8996",
+    },
+    {
+      tag: [t.variableName, t.propertyName],
+      color: "#77ACB0",
+    },
+    {
+      tag: t.self,
+      color: "#77ACB0",
+      fontWeight: "bold",
+    },
+    {
+      tag: t.regexp,
+      color: "#E3965E",
+    },
+    {
+      tag: [t.tagName, t.angleBracket],
+      color: "#BAA827",
+    },
+    {
+      tag: t.attributeName,
+      color: "#B06520",
+    },
+    {
+      tag: t.derefOperator,
+      color: "#000",
+    },
+  ],
+})

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 }

docs/.vitepress/theme/index.ts

@@ -0,0 +1,14 @@
+import type { Theme } from "vitepress"
+import DefaultTheme from "vitepress/theme"
+import BVideo from "./components/BVideo.vue"
+import Author from "./components/Author.vue"
+import CodeEditor from "./components/CodeEditor.vue"
+
+export default {
+  extends: DefaultTheme,
+  async enhanceApp({ app }) {
+    app.component("bvideo", BVideo)
+    app.component("author", Author)
+    app.component("code-editor", CodeEditor)
+  },
+} satisfies Theme