Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add vitepress #3236

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
.vscode
.temp
.cache
.vitepress/cache
*.iml
__pycache__
/node_modules
Expand Down
83 changes: 83 additions & 0 deletions .vitepress/config.mts
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
import fs from 'node:fs/promises';
import { resolve } from 'node:path';

import type { DefaultTheme } from 'vitepress';
import { defineConfig } from 'vitepress';

/**
* 判断路径目标是否为文件夹
* @param {string} path
* @returns
*/
const isDir = async (path: string) => {
try {
const stat = await fs.stat(path);
return stat.isDirectory();
} catch (error) {
return false;
}
};

// 获取根目录
const rootPath = resolve(import.meta.dirname, '../');

// TODO 对于 solution,需要递归读取
// const questions = ['lcci', 'lcof', 'lcof2', 'lcp', 'solution'];
// FIXME lcof 较为特殊,似乎中文名加上空格,导致服务崩溃
// const questions = ['lcci', 'lcof', 'lcof2', 'lcp'];
const questions = ['lcci', 'lcof2', 'lcp'];
const items: Record<string, DefaultTheme.Sidebar> = {};
const rewrites: Record<string, string> = {};

for (const question of questions) {
const files = await fs.readdir(resolve(rootPath, question));
items[question] = [];
for (const file of files) {
if (!(await isDir(resolve(rootPath, question, file)))) {
continue;
}
items[question].push({ text: file, link: `${question}/${file}/README.md` });
rewrites[`${question}/${file}/README.md`] = `${question}/${file}`;
}
}

// https://vitepress.dev/reference/site-config
export default defineConfig({
title: 'LeetCode Wiki',
description: 'LeetCode、《剑指 Offer(第 2 版)》、《程序员面试金典(第 6 版)》题解',
locales: {
root: {
label: '中文',
lang: 'cn',
},
en: {
label: 'English',
lang: 'en-US',
link: '/en',
},
},
markdown: {
math: true,
},
themeConfig: {
// https://vitepress.dev/reference/default-theme-config
nav: [
{ text: 'Home', link: '/' },
{ text: 'LeetCode', link: '/lc/index' },
...questions.map(question => ({ text: question, link: `/${question}/README.md` })),
],
socialLinks: [{ icon: 'github', link: 'https://github.com/doocs/leetcode' }],
sidebar: questions.reduce((r, question) => {
return {
...r,
[`/${question}/`]: [
{
text: question,
items: items[question],
},
],
};
}, {}),
},
rewrites,
});
17 changes: 17 additions & 0 deletions .vitepress/theme/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
// https://vitepress.dev/guide/custom-theme
import { h } from 'vue';
import type { Theme } from 'vitepress';
import DefaultTheme from 'vitepress/theme';
import './style.css';

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;
139 changes: 139 additions & 0 deletions .vitepress/theme/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
/**
* Customize default theme styling by overriding CSS variables:
* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
*/

/**
* Colors
*
* Each colors have exact same color scale system with 3 levels of solid
* colors with different brightness, and 1 soft color.
*
* - `XXX-1`: The most solid color used mainly for colored text. It must
* satisfy the contrast ratio against when used on top of `XXX-soft`.
*
* - `XXX-2`: The color used mainly for hover state of the button.
*
* - `XXX-3`: The color for solid background, such as bg color of the button.
* It must satisfy the contrast ratio with pure white (#ffffff) text on
* top of it.
*
* - `XXX-soft`: The color used for subtle background such as custom container
* or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
* on top of it.
*
* The soft color must be semi transparent alpha channel. This is crucial
* because it allows adding multiple "soft" colors on top of each other
* to create a accent, such as when having inline code block inside
* custom containers.
*
* - `default`: The color used purely for subtle indication without any
* special meanings attched to it such as bg color for menu hover state.
*
* - `brand`: Used for primary brand colors, such as link text, button with
* brand theme, etc.
*
* - `tip`: Used to indicate useful information. The default theme uses the
* brand color for this by default.
*
* - `warning`: Used to indicate warning to the users. Used in custom
* container, badges, etc.
*
* - `danger`: Used to show error, or dangerous message to the users. Used
* in custom container, badges, etc.
* -------------------------------------------------------------------------- */

:root {
--vp-c-default-1: var(--vp-c-gray-1);
--vp-c-default-2: var(--vp-c-gray-2);
--vp-c-default-3: var(--vp-c-gray-3);
--vp-c-default-soft: var(--vp-c-gray-soft);

--vp-c-brand-1: var(--vp-c-indigo-1);
--vp-c-brand-2: var(--vp-c-indigo-2);
--vp-c-brand-3: var(--vp-c-indigo-3);
--vp-c-brand-soft: var(--vp-c-indigo-soft);

--vp-c-tip-1: var(--vp-c-brand-1);
--vp-c-tip-2: var(--vp-c-brand-2);
--vp-c-tip-3: var(--vp-c-brand-3);
--vp-c-tip-soft: var(--vp-c-brand-soft);

--vp-c-warning-1: var(--vp-c-yellow-1);
--vp-c-warning-2: var(--vp-c-yellow-2);
--vp-c-warning-3: var(--vp-c-yellow-3);
--vp-c-warning-soft: var(--vp-c-yellow-soft);

--vp-c-danger-1: var(--vp-c-red-1);
--vp-c-danger-2: var(--vp-c-red-2);
--vp-c-danger-3: var(--vp-c-red-3);
--vp-c-danger-soft: var(--vp-c-red-soft);
}

/**
* Component: Button
* -------------------------------------------------------------------------- */

:root {
--vp-button-brand-border: transparent;
--vp-button-brand-text: var(--vp-c-white);
--vp-button-brand-bg: var(--vp-c-brand-3);
--vp-button-brand-hover-border: transparent;
--vp-button-brand-hover-text: var(--vp-c-white);
--vp-button-brand-hover-bg: var(--vp-c-brand-2);
--vp-button-brand-active-border: transparent;
--vp-button-brand-active-text: var(--vp-c-white);
--vp-button-brand-active-bg: var(--vp-c-brand-1);
}

/**
* Component: Home
* -------------------------------------------------------------------------- */

:root {
--vp-home-hero-name-color: transparent;
--vp-home-hero-name-background: -webkit-linear-gradient(
120deg,
#bd34fe 30%,
#41d1ff
);

--vp-home-hero-image-background-image: linear-gradient(
-45deg,
#bd34fe 50%,
#47caff 50%
);
--vp-home-hero-image-filter: blur(44px);
}

@media (min-width: 640px) {
:root {
--vp-home-hero-image-filter: blur(56px);
}
}

@media (min-width: 960px) {
:root {
--vp-home-hero-image-filter: blur(68px);
}
}

/**
* Component: Custom Block
* -------------------------------------------------------------------------- */

:root {
--vp-custom-block-tip-border: transparent;
--vp-custom-block-tip-text: var(--vp-c-text-1);
--vp-custom-block-tip-bg: var(--vp-c-brand-soft);
--vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
}

/**
* Component: Algolia
* -------------------------------------------------------------------------- */

.DocSearch {
--docsearch-primary-color: var(--vp-c-brand-1) !important;
}

22 changes: 22 additions & 0 deletions index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
---
# https://vitepress.dev/reference/default-theme-home-page
layout: home

hero:
name: 'LeetCode Wiki'
text: 'LeetCode、《剑指 Offer(第 2 版)》、《程序员面试金典(第 6 版)》题解'
actions:
- theme: brand
text: 开始阅读
link: /lc

features:
- title: LeetCode
details: LeetCode 全站所有题目题解
- title: 剑指 Offer
details: 精选谷歌、微软等知名 IT 企业的典型面试题
- title: 剑指 Offer(专项突击版)
details: 精选国内外名企高频面试题并深度拓展
- title: 程序员面试金典
details: 原谷歌资深面试官的经验之作,帮助了许多想要加入脸书、苹果、谷歌等 IT 名企的求职者拿到 Dream offer
---
Loading
Loading