update vitepress to v1.0

This commit is contained in:
2024-03-26 19:03:14 +08:00
parent 99c45510e5
commit fc7f8b9499
131 changed files with 431 additions and 330 deletions

97
.vitepress/config.ts Normal file
View File

@@ -0,0 +1,97 @@
import { defineConfig } from "vitepress"
// https://vitepress.dev/reference/site-config
export default defineConfig({
lang: "zh-Hans-CN",
title: "徐越的编程书",
markdown: {
container: {
tipLabel: "提示",
warningLabel: "警告",
dangerLabel: "危险",
infoLabel: "信息",
detailsLabel: "详细信息",
},
},
head: [
["link", { rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
["link", { rel: "stylesheet", href: "/style.css" }],
],
themeConfig: {
// https://vitepress.dev/reference/default-theme-config
externalLinkIcon: true,
nav: [
{ text: "首页", link: "/" },
{ text: "基础知识", link: "/python/00/index.md" },
{ text: "办公自动化", link: "/oa/index.md" },
{ text: "网络爬虫", link: "/crawler/index.md" },
{ text: "计算机科学", link: "/cs/00/index.md" },
],
sidebar: {
"/python": [
{
text: "课程须知",
items: [
{ text: "代码区", link: "/python/00/index.md" },
{ text: "自测猫", link: "/python/00/cat.md" },
{ text: "练习册", link: "/python/00/playground.md" },
{ text: "判题狗", link: "/python/00/dog.md" },
],
},
{
text: "第一天",
items: [{ text: "", link: "" }],
},
{
text: "第二天",
items: [{ text: "", link: "" }],
},
{
text: "第三天",
items: [{ text: "", link: "" }],
},
{
text: "第四天",
items: [{ text: "", link: "" }],
},
{
text: "第五天",
items: [{ text: "", link: "" }],
},
{
text: "第六天",
items: [{ text: "", link: "" }],
},
{
text: "第七天",
items: [{ text: "", link: "" }],
},
],
"/oa": [{}],
"/crawler": [{}],
"/cs": [
{ text: "简介", link: "/cs/00/index.md" },
{ text: "计算机早期历史", link: "/cs/01/index.md" },
{ text: "电子计算机", link: "/cs/02/index.md" },
{ text: "布尔逻辑和逻辑门", link: "/cs/03/index.md" },
{ text: "二进制", link: "/cs/04/index.md" },
{ text: "算术逻辑单元", link: "/cs/05/index.md" },
{ text: "寄存器和内存", link: "/cs/06/index.md" },
{ text: "中央处理器", link: "/cs/07/index.md" },
{ text: "指令和程序", link: "/cs/08/index.md" },
{ text: "高级 CPU 设计", link: "/cs/09/index.md" },
{ text: "早期的编程方式", link: "/cs/10/index.md" },
{ text: "编程语言发展史", link: "/cs/11/index.md" },
{ text: "编程原理 - 语句和函数", link: "/cs/12/index.md" },
{ text: "算法入门", link: "/cs/13/index.md" },
{ text: "......", link: "/cs/14/index.md" },
],
},
outlineTitle: "目录",
sidebarMenuLabel: "侧边栏",
returnToTopLabel: "返回顶部",
darkModeSwitchLabel: "浅色/深色",
docFooter: { prev: "上一篇", next: "下一篇" },
},
})

View File

@@ -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
}

View File

@@ -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),
]

View File

@@ -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",
},
],
})

View File

@@ -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>

View File

@@ -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>

View File

@@ -0,0 +1,115 @@
<script setup lang="ts">
import { computed, ref } from "vue"
import { useData } from "vitepress"
import { VPButton } from "vitepress/theme"
import Codemirror from "vue-codemirror6"
import { cpp } from "@codemirror/lang-cpp"
import { python } from "@codemirror/lang-python"
import { indentUnit } from "@codemirror/language"
import { EditorView } from "@codemirror/view"
import { createSubmission } from "../judge"
import { smoothy } from "../cm-themes/smoothy"
import { oneDark } from "../cm-themes/oneDark"
interface Props {
code: string
readonly?: boolean
lang?: "python" | "c"
}
const props = withDefaults(defineProps<Props>(), {
lang: "python",
readonly: false,
})
const { isDark } = useData()
const lang = computed(() => {
if (props.lang === "python") {
return python()
}
return cpp()
})
const styleTheme = EditorView.baseTheme({
"& .cm-scroller": {
"font-family": "Monaco",
border: "2px solid var(--vp-c-divider)",
},
"&.cm-editor.cm-focused": {
outline: "none",
},
"&.cm-editor .cm-tooltip.cm-tooltip-autocomplete ul": {
"font-family": "Monaco",
},
})
const code = ref(props.code.trim())
const input = ref("")
const output = ref("")
async function run() {
output.value = ""
const result = await createSubmission(
{ value: code.value, language: props.lang },
input.value,
)
output.value = result.output
}
function reset() {
code.value = props.code.trim()
output.value = ""
}
</script>
<template>
<ClientOnly>
<div :class="$style.container">
<p :class="$style.title">代码区</p>
<Codemirror
v-model="code"
:lang="lang"
basic
tab
:tab-size="4"
:readonly="props.readonly"
:extensions="[
styleTheme,
isDark ? oneDark : smoothy,
indentUnit.of(' '),
]"
/>
<p :class="$style.title">输入框</p>
<Codemirror
v-model="input"
minimal
:extensions="[styleTheme, isDark ? oneDark : smoothy]"
/>
<div :class="$style.actions">
<VPButton :class="$style.run" @click="run" text="运行"></VPButton>
<VPButton @click="reset" theme="alt" text="重置"></VPButton>
</div>
<p :class="$style.title" v-if="output.length">运行结果</p>
<pre :class="$style.output">{{ output }}</pre>
</div>
</ClientOnly>
</template>
<style module>
.container {
background-color: var(--vp-code-block-bg);
padding: 8px 16px;
border-radius: 8px;
}
.title {
font-weight: bold;
}
.actions {
margin-top: 20px;
}
.run {
margin-right: 20px;
}
.output {
font-family: Monaco;
}
</style>

14
.vitepress/theme/index.ts Normal file
View File

@@ -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("editor", CodeEditor)
},
} satisfies Theme

82
.vitepress/theme/judge.ts Normal file
View File

@@ -0,0 +1,82 @@
import axios from "axios"
import { inBrowser } from 'vitepress'
interface Code {
language: "c" | "python"
value: string
}
const DEAD_RESULTS = {
c: {
encoded:
"I2luY2x1ZGU8c3RkaW8uaD4NCg0KaW50IG1haW4oKQ0Kew0KICAgIHByaW50Zigi6buE5bKp5LiA6IGMIik7DQogICAgcmV0dXJuIDA7DQp9",
result: {
status: 3,
output: "黄岩一职",
},
},
python: {
encoded: "cHJpbnQoIum7hOWyqeS4gOiBjCIp",
result: {
status: 3,
output: "黄岩一职",
},
},
}
function getChromeVersion() {
if (!inBrowser) return 0
var raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)
return raw ? parseInt(raw[2], 10) : 0
}
const isLowVersion = getChromeVersion() < 80
const protocol = isLowVersion ? "http" : "https"
const http = axios.create({ baseURL: `${protocol}://judge0api.xuyue.cc` })
function encode(string?: string) {
return btoa(String.fromCharCode(...new TextEncoder().encode(string ?? "")))
}
function decode(bytes?: string) {
const latin = atob(bytes ?? "")
return new TextDecoder("utf-8").decode(
Uint8Array.from({ length: latin.length }, (_, index) =>
latin.charCodeAt(index),
),
)
}
export async function createSubmission(code: Code, input: string) {
const encodedCode = encode(code.value)
if (encodedCode === DEAD_RESULTS[code.language].encoded) {
return DEAD_RESULTS[code.language].result
} else {
const id = {
c: 50,
python: 71,
}[code.language]
let compilerOptions = ""
if (id === 50) compilerOptions = "-lm" // 解决 GCC 的链接问题
const payload = {
source_code: encodedCode,
language_id: id,
stdin: encode(input),
redirect_stderr_to_stdout: true,
compiler_options: compilerOptions,
}
const response = await http.post("/submissions", payload, {
params: { base64_encoded: true, wait: true },
})
const data = response.data
return {
status: data.status && data.status.id,
output: [decode(data.compile_output), decode(data.stdout)]
.join("\n")
.trim(),
}
}
}