OpenSource/LoveIt
1
0
Fork 0
mirror of https://github.com/dillonzq/LoveIt.git synced 2024-11-14 10:56:16 +01:00
Code Issues Projects Releases Packages Wiki Activity

feat(mermaid): improve mermaid style and render

Browse source
This commit is contained in:
Dillon ZENG 2019-11-24 01:10:17 +08:00
parent b20fe1bb4f
commit 2578aba9ca
14 changed files with 53 additions and 332 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
assets/css/_page/_post.scss
View file

@ -344,6 +344,10 @@
@import "../_partial/_post/admonition";
.mermaid {
width: 100%;
margin: 3% auto;
text-align: center;
@import "../_mermaid/neutral/index";
.dark-theme & {
@ -364,6 +368,7 @@
height: 0;
padding-bottom: 75%;
margin: 3% auto;
text-align: center;
iframe {
position: absolute;

24
assets/js/blog.js
View file

@ -33,7 +33,7 @@ jQuery(function($) {
_Blog.dynamicToTop = function() {
const min = 300;
var $toTop = $('#dynamic-to-top');
$(window).scroll(function() {
$(window).scroll(() => {
var scrollTop = $(window).scrollTop();
if (typeof document.body.style.maxHeight === 'undefined') {
$toTop.css({
@ -103,7 +103,6 @@ jQuery(function($) {
&& (temp = newTocList.children[0].children[0]).tagName === 'UL') {
newTocList = temp;
}
if (newTocList !== oldTocList) toc.replaceChild(newTocList, oldTocList);
};
@ -220,19 +219,33 @@ jQuery(function($) {
}
};
_Blog.mermaid = function() {
if (window.mermaidMap) {
const mermaidAPI = mermaid.mermaidAPI
Object.keys(mermaidMap).forEach((id) => {
const element = document.getElementById(id);
mermaidAPI.render("d" + id, mermaidMap[id], (svgCode) => {
element.innerHTML = svgCode;
const svg = element.firstChild;
svg.style.width = "100%"
}, element);
});
}
}
_Blog.echarts = function() {
if (window.echartsMap) {
for (let i = 0; i < echartsArr.length; i++) {
echartsArr[i].dispose();
}
echartsArr = [];
Object.keys(echartsMap).forEach(function(id) {
Object.keys(echartsMap).forEach((id) => {
let myChart = echarts.init(document.getElementById(id), window.isDark ? 'dark' : 'macarons', {renderer: 'svg'});
myChart.setOption(echartsMap[id]);
echartsArr.push(myChart);
});
window.addEventListener("resize", function() {
this.setTimeout(function(){
this.setTimeout(() => {
for (let i = 0; i < echartsArr.length; i++) {
echartsArr[i].resize();
}
@ -275,13 +288,14 @@ jQuery(function($) {
}
};
$(document).ready(function() {
$(document).ready(() => {
_Blog.toggleMobileMenu();
_Blog.toggleTheme();
_Blog.changeTitle();
_Blog.dynamicToTop();
_Blog.chroma();
_Blog.responsiveTable();
_Blog.mermaid();
_Blog.echarts();
_Blog.countdown();
_Blog.typeit();

299
exampleSite/zh/content/posts/test.md
View file

@ -1,299 +0,0 @@
---
title: "Test Page"
date: 2019-08-04T22:49:56+08:00
lastmod: 2019-08-17T22:41:56+08:00
draft: true
description: "This is a test page."
show_in_homepage: true
show_description: false
tags: []
categories: []
featured_image: ""
featured_image_preview: ""
comment: false
toc: true
autoCollapseToc: true
math: true
dev: true
---
## This is a test page
Test all features in development[^link test].
[^link test]: https://www.google.com/
<!--more-->
## Test ECharts
{{< echarts height="500px" >}}
{
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
{{< /echarts >}}
## Test Ruby
人最重要的特点是会思考，建站初衷无非是保存思维的电子快照。
当然各种文档工具亦或是简单的文本编辑器也能随时记录点滴，
选择建个人网站无非是想满足 [技术爱好者]^(Technology enthusiast) 的偏执。
## Test Music
## Test Toc
Toc
### Toc1
Toc
#### Toc 1-1
Toc
#### Toc 1-2
Toc
#### Toc 1-3
Toc
### Toc2
Toc
#### Toc 2-1
Toc
#### Toc 2-2
Toc
### Toc3
Toc
## Test Table
| Tables | Are | Cool |
| :------------ |:-------------:| -----:|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
## Test Diagram
{{< diagram >}}
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
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!
{{< /diagram >}}
## Test kbd
<kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>del</kbd>
## Test Mixed Lists
Mixed Lists
- item 1
* [X] item A
* [ ] item B
more text
1. item a
2. itemb
3. item c
* [X] item C
- item 2
- item 3
Really Mixed Lists
- item 1
* [X] item A
- item B
more text
1. item a
+ itemb
+ [ ] item c
1. item C
1. item 2
- [X] item 3
## Test fa (Font Awesome)
:(fab fa-weixin fa-2x):
## Test Footnote
This is a footnote[^1]
[^1]: This is a footnote
## Test Admonition
{{% admonition quote %}}
biu biu biu.
{{% /admonition %}}
{{% admonition quote "I'm title!" false %}}
biu biu biu.
{{% /admonition %}}
{{% admonition example "I'm title!" false %}}
biu biu biu.
{{% /admonition %}}
{{% admonition bug "I'm title!" false %}}
biu biu biu.
{{% /admonition %}}
{{% admonition danger "I'm title!" false %}}
biu biu biu.
{{% /admonition %}}
{{% admonition failure "I'm title!" false %}}
biu biu biu.
{{% /admonition %}}
{{% admonition warning "I'm title!" false %}}
biu biu biu.
{{% /admonition %}}
{{% admonition question "I'm title!" false %}}
biu biu biu.
{{% /admonition %}}
{{% admonition success "I'm title!" false %}}
biu biu biu.
{{% /admonition %}}
{{% admonition tip "I'm title!" false %}}
biu biu biu.
{{% /admonition %}}
{{% admonition info "I'm title!" true %}}
**biu biu biu.**
{{% /admonition %}}
{{% admonition note "I'm title!" false %}}
**biu biu biu.**
{{% /admonition %}}
{{% admonition type="abstract" title="Test Admonition" %}}
This is a Admonition.
{{% /admonition %}}
## Test Highlight
`ls` 命令
```go
// You can edit this code!
// Click here and start typing.
package main
import "fmt"
func main() {
fmt.Println("Hello, 世界", "Hello, 世界", "Hello, 世界", "Hello, 世界", "Hello, 世界", "Hello, 世界", "Hello, 世界", "Hello, 世界")
}
```
- This is a list that contains multiple code blocks.
- Here is an indented block
```Code
This will still be parsed
as a normal indented code block.
```
- Here is a fenced code block:
```Code
This will still be parsed
as a fenced code block.
```
> ```Code
> Blockquotes?
> Not a problem!
> ```
## Test Typeit
{{< typeit group="test" tag="h3" >}}
Here is a story about love...
{{< /typeit >}}
{{< typeit group="test" code="java" >}}
u.accepted(); // [2018/01/05](/since/) special
int a = 1;
{{< /typeit >}}
## Test Img
![Gif](https://static.dillonzq.com/images/20190817130904-U6cPUk.jpg "Title")
## Test Align
{{% align-right %}}
**Test Text**
{{% /align-right %}}
## Test Katex
$$ c = \pm\sqrt{a^2 + b^2} $$

10
layouts/partials/scripts.html
View file

@ -54,7 +54,8 @@
{{ $res := resources.Get "js/lib/mermaid/mermaid.min.js" | resources.Minify }}
{{ $mermaid = printf "<script src=\"%s\"></script>" $res.RelPermalink }}
{{ end }}
{{ $mermaid = delimit (slice $mermaid "<script>mermaid.initialize({startOnLoad: true, theme: null,});</script>") "" }}
{{ $mermaidInit := "<script>mermaid.initialize({startOnLoad: false, theme: null});</script>" }}
{{ $mermaid = delimit (slice $mermaid $mermaidInit) "" }}
<!-- ECharts https://github.com/apache/incubator-echarts -->
{{ $echarts_js := "" }}
{{ if eq (getenv "HUGO_ENV") "production" | and .Site.Params.cdn.echarts_js }}
@ -121,17 +122,18 @@
{{ if .Params.dev }}
{{ with .Scratch.Get "echartsMap" }}
{{ $echarts | safeHTML }}
{{ $echartsMap := . }}
<script>window.echartsMap = {
{{ range $key, $var := $echartsMap }}
{{ range $key, $var := . }}
{{ $key }}: {{ $var | safeJS }},
{{ end }}
};window.echartsArr=[];</script>
{{ end }}
{{ end }}
{{/* dev feature */}}
{{ if .Scratch.Get "diagram" }}
{{ with .Scratch.Get "mermaidMap" }}
{{ $mermaid | safeHTML }}
<script>window.mermaidMap = {{ . | jsonify | safeJS }};</script>
{{ end }}
{{ if or .Params.math .Site.Params.math }}

4
layouts/shortcodes/align-center.html
View file

@ -1,4 +0,0 @@
{{ $_hugo_config := `{ "version": 1 }` -}}
<div class="align-center">
{{- .Inner -}}
</div>

4
layouts/shortcodes/align-left.html
View file

@ -1,4 +0,0 @@
{{ $_hugo_config := `{ "version": 1 }` -}}
<div class="align-left">
{{- .Inner -}}
</div>

4
layouts/shortcodes/align-right.html
View file

@ -1,4 +0,0 @@
{{ $_hugo_config := `{ "version": 1 }` -}}
<div class="align-right">
{{- .Inner -}}
</div>

5
layouts/shortcodes/align.html Normal file
View file

@ -0,0 +1,5 @@
{{ $_hugo_config := `{ "version": 1 }` -}}
<!-- [left, center, right] -->
<div class={{ .Get 0 | printf "align-%s" }}>
{{- .Inner -}}
</div>

2
layouts/shortcodes/countdown.html
View file

@ -1,6 +1,6 @@
{{ if .Get "date" -}}
{{ $date := .Get "date" }}
{{ $id := delimit (split (md5 $date) "" | shuffle) "" | printf "cd-%s" -}}
{{ $id := delimit (split (md5 $date) "" | shuffle) "" | printf "countdown-%s" -}}
{{ $defaultPattern := printf "%%D %s %%H %s %%M %s %%S %s" (T "day") (T "hour") (T "minute") (T "second") }}
{{ $new := dict $id (dict "date" $date "pattern" (.Get "pattern" | default $defaultPattern)) }}
{{ with .Page.Scratch.Get "countdownMap" -}}

6
layouts/shortcodes/echarts.html → layouts/shortcodes/dev/echarts.html
View file

@ -1,10 +1,10 @@
<!-- shuffle md5 as id -->
{{ $id := delimit (split (md5 .Inner) "" | shuffle) "" | printf "ec-%s" -}}
{{ $id := delimit (split (md5 .Inner) "" | shuffle) "" | printf "echarts-%s" -}}
{{ $echartsMap := .Page.Scratch.Get "echartsMap" -}}
{{ if $echartsMap -}}
{{ $echartsMap = dict $id .Inner | merge $echartsMap -}}
{{ $echartsMap = .Inner | printf "{%s}" | dict $id | merge $echartsMap -}}
{{ else -}}
{{ $echartsMap = dict $id .Inner -}}
{{ $echartsMap = .Inner | printf "{%s}" | dict $id -}}
{{ end -}}
{{ .Page.Scratch.Set "echartsMap" $echartsMap -}}
<div class="echarts" id="{{ $id }}"></div>

4
layouts/shortcodes/float-right.html
View file

@ -1,4 +0,0 @@
{{ $_hugo_config := `{ "version": 1 }` -}}
<div class="float-right">
{{- .Inner -}}
</div>

4
layouts/shortcodes/diagram.html → layouts/shortcodes/float.html
View file

@ -1,5 +1,5 @@
{{ $_hugo_config := `{ "version": 1 }` -}}
{{ .Page.Scratch.Set "diagram" "true" }}
<div class="mermaid">
<!-- [left, right] -->
<div class={{ .Get 0 | printf "float-%s" }}>
{{- .Inner -}}
</div>

10
layouts/shortcodes/mermaid.html Normal file
View file

@ -0,0 +1,10 @@
<!-- shuffle md5 as id -->
{{ $id := delimit (split (md5 .Inner) "" | shuffle) "" | printf "mermaid-%s" -}}
{{ $mermaidMap := .Page.Scratch.Get "mermaidMap" -}}
{{ if $mermaidMap -}}
{{ $mermaidMap = trim .Inner "\n" | dict $id | merge $mermaidMap -}}
{{ else -}}
{{ $mermaidMap = trim .Inner "\n" | dict $id -}}
{{ end -}}
{{ .Page.Scratch.Set "mermaidMap" $mermaidMap -}}
<div class="mermaid" id="{{ $id }}"></div>

2
layouts/shortcodes/typeit.html
View file

@ -1,7 +1,7 @@
<!-- only the trailing newline is retained -->
{{ $content := replaceRE `(?s)^\n*(.*?)\n*$` "$1\n" .Inner }}
<!-- shuffle md5 as id -->
{{ $id := delimit (split (md5 $content) "" | shuffle) "" | printf "tp-%s" }}
{{ $id := delimit (split (md5 $content) "" | shuffle) "" | printf "typeit-%s" }}
<div class={{ .Get "class" | default "typeit" }}>
<!-- raw html content -->