YunYouJun
/
valaxy
mirror of https://github.com/YunYouJun/valaxy
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: mermaid wrapper in code

This commit is contained in:
YunYouJun 2024-02-14 19:11:21 +08:00
parent 9fde85379e
commit e53e7ae680
8 changed files with 339 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
demo/yun/pages/posts/mermaid.md
View File

@ -2,7 +2,7 @@
title: Mermaid
---
- [Mermaid](https://mermaid.js.org/)
- [Mermaid](https://mermaid.js.org/) - Diagramming and charting tool
## Flowchart
@ -14,13 +14,15 @@ graph TD;
C-->D;
```
```txt
````txt
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
````
## Sequence diagram
@ -38,6 +40,22 @@ sequenceDiagram
Bob-->>John: Jolly good!
```
````txt
```mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```
````
## Gantt diagram
```mermaid
@ -53,6 +71,21 @@ Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
```
````txt
```mermaid
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
```
````
## Class diagram
```mermaid
@ -72,6 +105,25 @@ Class01 : int gorilla
Class08 <--> C2: Cool label
```
````txt
```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
```
````
## Git graph
```mermaid
@ -87,6 +139,21 @@ Class08 <--> C2: Cool label
commit
```
````txt
```mermaid
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
```
````
## Quadrant Chart
```mermaid
@ -106,6 +173,25 @@ quadrantChart
Campaign F: [0.35, 0.78]
```
````txt
```mermaid
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]
```
````
## XY Chart
```mermaid
@ -116,3 +202,14 @@ xychart-beta
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```
````txt
```mermaid
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```
````

1
docs/.valaxy/typed-router.d.ts vendored
View File

@ -59,6 +59,7 @@ declare module 'vue-router/auto/routes' {
'/ecosystem/vscode': RouteRecordInfo<'/ecosystem/vscode', '/ecosystem/vscode', Record<never, never>, Record<never, never>>,
'/examples/code-height-limit': RouteRecordInfo<'/examples/code-height-limit', '/examples/code-height-limit', Record<never, never>, Record<never, never>>,
'/examples/katex': RouteRecordInfo<'/examples/katex', '/examples/katex', Record<never, never>, Record<never, never>>,
'/examples/mermaid': RouteRecordInfo<'/examples/mermaid', '/examples/mermaid', Record<never, never>, Record<never, never>>,
'/examples/partial-content-encryption': RouteRecordInfo<'/examples/partial-content-encryption', '/examples/partial-content-encryption', Record<never, never>, Record<never, never>>,
'/examples/site': RouteRecordInfo<'/examples/site', '/examples/site', Record<never, never>, Record<never, never>>,
'/faq/': RouteRecordInfo<'/faq/', '/faq', Record<never, never>, Record<never, never>>,

215
docs/pages/examples/mermaid.md Normal file
View File

@ -0,0 +1,215 @@
---
title: Mermaid
---
- [Mermaid](https://mermaid.js.org/) - Diagramming and charting tool
## Flowchart
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
````txt
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
````
## Sequence diagram
```mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```
````txt
```mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```
````
## Gantt diagram
```mermaid
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
```
````txt
```mermaid
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
```
````
## Class diagram
```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
```
````txt
```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
```
````
## Git graph
```mermaid
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
```
````txt
```mermaid
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
```
````
## Quadrant Chart
```mermaid
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]
```
````txt
```mermaid
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]
```
````
## XY Chart
```mermaid
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```
````txt
```mermaid
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```
````

8
docs/pages/guide/markdown.md
View File

@ -935,6 +935,8 @@ Freedom to control your layout!
## Mermaid
Based on [mermaid](https://mermaid.js.org/), you can use it in your markdown file directly.
```mermaid
graph TD;
A-->B;
@ -943,8 +945,14 @@ graph TD;
C-->D;
```
````txt
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
````
More examples see: [Mermaid](/examples/mermaid)

10
packages/valaxy/node/plugins/markdown/transform/mermaid.ts
View File

@ -4,11 +4,19 @@ import * as base64 from 'js-base64'
* Transform Mermaid code blocks (render done on client side)
*/
export function transformMermaid(md: string): string {
return md
// replace ```mermaid with ```txt\n```mermaid, avoid parsing by mermaid
md = md.replace(/^````txt\n```mermaid/mg, '````txt\n\\`\\`\\`mermaid')
md = md
.replace(/^```mermaid\s*?({.*?})?\n([\s\S]+?)\n```/mg, (full, options = '', code = '') => {
code = code.trim()
options = options.trim() || '{}'
const encoded = base64.encode(code, true)
return `<ValaxyMermaid :code="'${encoded}'" v-bind="${options}" />`
})
// restore \`\`\`mermaid with ```mermaid
md = md.replace(/^````txt\n\\`\\`\\`mermaid/mg, '````txt\n\`\`\`mermaid')
return md
}

3
packages/valaxy/node/plugins/preset.ts
View File

@ -11,6 +11,7 @@ import UnheadVite from '@unhead/addons/vite'
import { resolve } from 'pathe'
import type { ResolvedValaxyOptions, ValaxyServerOptions } from '../options'
import { customElements } from '../constants'
import { createUnocssPlugin } from './unocss'
import { createConfigPlugin } from './extendConfig'
import { createClientSetupPlugin } from './setupClient'
@ -28,8 +29,6 @@ export async function ViteValaxyPlugins(
const MarkdownPlugin = await createMarkdownPlugin(options)
const ValaxyLoader = await createValaxyLoader(options, serverOptions)
const { customElements } = await import('valaxy/node')
return [
MarkdownPlugin,
createConfigPlugin(options),

2
packages/valaxy/node/plugins/valaxy/index.ts
View File

@ -223,7 +223,7 @@ export async function createValaxyLoader(options: ResolvedValaxyOptions, serverO
hasDeadLinks = true
consola.error(`Dead links found in ${id}`)
consola.info(deadLinks)
consola.error(deadLinks)
}
if (includes.length) {
includes.forEach((i) => {

10
pnpm-lock.yaml
View File

@ -14,7 +14,7 @@ importers:
devDependencies:
'@antfu/eslint-config':
specifier: 2.6.4
version: 2.6.4(@vue/compiler-sfc@3.4.18)(eslint@8.56.0)(typescript@5.3.3)(vitest@1.2.2)
version: 2.6.4(@vue/compiler-sfc@3.4.19)(eslint@8.56.0)(typescript@5.3.3)(vitest@1.2.2)
'@iconify-json/logos':
specifier: ^1.1.42
version: 1.1.42
@ -760,7 +760,7 @@ packages:
'@jridgewell/gen-mapping': 0.3.3
'@jridgewell/trace-mapping': 0.3.22
/@antfu/eslint-config@2.6.4(@vue/compiler-sfc@3.4.18)(eslint@8.56.0)(typescript@5.3.3)(vitest@1.2.2):
/@antfu/eslint-config@2.6.4(@vue/compiler-sfc@3.4.19)(eslint@8.56.0)(typescript@5.3.3)(vitest@1.2.2):
resolution: {integrity: sha512-dMD/QC5KWS1OltdpKLhfZM7W7y7zils85opk8d4lyNr7yn0OFjZs7eMYtcC6DrrN2kQ1JrFvBM7uB0QdWn5PUQ==}
hasBin: true
peerDependencies:
@ -814,7 +814,7 @@ packages:
eslint-plugin-vitest: 0.3.21(@typescript-eslint/eslint-plugin@6.20.0)(eslint@8.56.0)(typescript@5.3.3)(vitest@1.2.2)
eslint-plugin-vue: 9.21.1(eslint@8.56.0)
eslint-plugin-yml: 1.12.2(eslint@8.56.0)
eslint-processor-vue-blocks: 0.1.1(@vue/compiler-sfc@3.4.18)(eslint@8.56.0)
eslint-processor-vue-blocks: 0.1.1(@vue/compiler-sfc@3.4.19)(eslint@8.56.0)
globals: 13.24.0
jsonc-eslint-parser: 2.4.0
local-pkg: 0.5.0
@ -5823,13 +5823,13 @@ packages:
- supports-color
dev: true
/eslint-processor-vue-blocks@0.1.1(@vue/compiler-sfc@3.4.18)(eslint@8.56.0):
/eslint-processor-vue-blocks@0.1.1(@vue/compiler-sfc@3.4.19)(eslint@8.56.0):
resolution: {integrity: sha512-9+dU5lU881log570oBwpelaJmOfOzSniben7IWEDRYQPPWwlvaV7NhOtsTuUWDqpYT+dtKKWPsgz4OkOi+aZnA==}
peerDependencies:
'@vue/compiler-sfc': ^3.3.0
eslint: ^8.50.0
dependencies:
'@vue/compiler-sfc': 3.4.18
'@vue/compiler-sfc': 3.4.19
eslint: 8.56.0
dev: true