test: add docs & e2e for code height limit & fix dark mode

cypress/e2e/docs/fm.spec.ts

@@ -18,7 +18,10 @@ context('Frontmatter', {
       .should('include', '/guide/getting-started')
   })
 
-  it('time warning', () => {
-    cy.visit('/test/time-warning')
+  it('code height limit', () => {
+    cy.visit('/examples/code-height-limit')
+
+    cy.get('button.collapse')
+      .should('exist')
   })
 })

docs/pages/dev/index.md

@@ -26,6 +26,11 @@ cd valaxy
 pnpm i
 # esbuild watch valaxy cli & valaxy-theme-yun
 # and run demo
+
+# build node cli
+pnpm run build
+
+# pnpm dev = pnpm dev:lib + pnpm demo
 pnpm dev
 ```
 
@@ -42,7 +47,5 @@ pnpm dev:lib
 
 If you only want to develop client.
 
-```bash
-# open a new terminal to run demo
-pnpm demo
-```
+- Docs: `pnpm docs:dev`
+- Demo(theme-yun): `pnpm demo`

docs/pages/examples/code-height-limit.md

@@ -9,7 +9,7 @@ codeHeightLimit: 300
 
 ## Configure for single page
 
-You can configure it in frontmatter. For example: 
+You can configure it in frontmatter. For example:
 
 ```md
 ---
@@ -17,7 +17,7 @@ codeHeightLimit: 300
 ---
 ```
 
-This is a code block that exceeds the height limit. 
+This is a code block that exceeds the height limit.
 
 ```ts
 import { defineValaxyConfig } from 'valaxy'
@@ -53,7 +53,7 @@ export default defineValaxyConfig<ThemeConfig>({
 
 ## Configure for the entire website
 
-Add codeHeightLimit field in site.config.ts
+Add `codeHeightLimit` field in `site.config.ts`.
 
 For example:
 
@@ -64,4 +64,4 @@ export default defineSiteConfig({
   // ignore other configuration
   codeHeightLimit: 300
 })
-```
+```

docs/pages/guide/config/index.md

@@ -410,6 +410,31 @@ export default defineSiteConfig({
 })
 ```
 
+### 代码块高度限制
+
+你可以为每篇文章设置代码块高度限制。
+
+譬如设置 `codeHeightLimit: 300`，则文章中所有代码块高度都不会超过 300px，并自动折叠。
+
+```ts {5}
+import { defineSiteConfig } from 'valaxy'
+
+export default defineSiteConfig({
+  // ...
+  codeHeightLimit: 300
+})
+```
+
+你也可以在文章的 Front Matter 中单独设置：
+
+```md {2}
+---
+codeHeightLimit: 300
+---
+```
+
+示例可参见 [代码块高度限制](/examples/code-height-limit)。
+
 ## 主题配置 {lang="zh-CN"}
 
 ## Theme Config {lang="en"}

docs/pages/guide/page.md

@@ -78,6 +78,7 @@ password: valaxy
 
 - `toc: false`: 隐藏目录
 - `aside: false`: 隐藏右侧文章导航栏
+- `codeHeightLimit: 300`: 代码块高度限制（300px）
 
 :::
 
@@ -87,5 +88,6 @@ password: valaxy
 
 - `toc: false`: Hide TOC
 - `aside: false`: Hide Right Aside
+- `codeHeightLimit: 300`: Code block height limit（300px）
 
 :::

packages/valaxy/client/styles/common/code.scss

@@ -233,7 +233,7 @@ html:not(.dark) .vp-code-dark {
     height: 24px;
     opacity: 1;
     cursor: pointer;
-    background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0%,#fff 100%);
+    background-image: linear-gradient(-180deg,rgba(0,0,0,0) 0%,var(--va-c-bg-dark) 100%);
 
     &::before {
       display: block;