Add support for mermaid graphs
This commit is contained in:
parent
df3b911030
commit
07c8a13e2c
4 changed files with 193 additions and 142 deletions
26
static/mermaid.css
Normal file
26
static/mermaid.css
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
.mermaid {
|
||||||
|
|
||||||
|
.nodeLabel {
|
||||||
|
color: #A9A9B3 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edgePaths path {
|
||||||
|
stroke: #A9A9B3 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.marker path {
|
||||||
|
stroke: #cad3f5;
|
||||||
|
fill: #A9A9B3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cluster rect {
|
||||||
|
fill: #1B1C1D !important;
|
||||||
|
stroke: #1F202E !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.node rect {
|
||||||
|
fill: #131415 !important;
|
||||||
|
stroke: #1F202E !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
<pre class="mermaid">
|
||||||
|
{{- .Inner | safeHTML }}
|
||||||
|
</pre>
|
||||||
|
{{ .Page.Store.Set "hasMermaid" true }}
|
||||||
|
|
@ -1,25 +1,29 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="{{ .Site.Language }}">
|
<html lang="{{ .Site.Language }}">
|
||||||
<head>
|
|
||||||
{{ partial "head.html" . }}
|
|
||||||
</head>
|
|
||||||
|
|
||||||
{{ block "body" . }}
|
<head>
|
||||||
<body>
|
{{ partial "head.html" . }}
|
||||||
|
<link rel="stylesheet" href="/mermaid.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
{{ block "body" . }}
|
||||||
|
|
||||||
|
<body>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
{{ partial "header.html" . }}
|
{{ partial "header.html" . }}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
{{ block "main" . }}{{ end }}
|
{{ block "main" . }}{{ end }}
|
||||||
</div>
|
|
||||||
|
|
||||||
{{ block "footer" . }}
|
|
||||||
{{ partial "footer.html" . }}
|
|
||||||
{{ end }}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{ partial "javascript.html" . }}
|
{{ block "footer" . }}
|
||||||
</body>
|
{{ partial "footer.html" . }}
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{ partial "javascript.html" . }}
|
||||||
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,139 +1,156 @@
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<main class="post">
|
<main class="post">
|
||||||
|
|
||||||
<div class="post-info">
|
<div class="post-info">
|
||||||
<p>
|
<p>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||||
<circle cx="12" cy="12" r="10"></circle>
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||||
<polyline points="12 6 12 12 16 14"></polyline>
|
class="feather feather-clock">
|
||||||
</svg>
|
<circle cx="12" cy="12" r="10"></circle>
|
||||||
{{ i18n "readingTime" .Page.ReadingTime }}
|
<polyline points="12 6 12 12 16 14"></polyline>
|
||||||
|
</svg>
|
||||||
|
{{ i18n "readingTime" .Page.ReadingTime }}
|
||||||
|
|
||||||
{{ if .IsTranslated }} | {{ i18n "postAvailable" }}
|
{{ if .IsTranslated }} | {{ i18n "postAvailable" }}
|
||||||
{{ range .Translations }}
|
{{ range .Translations }}
|
||||||
<a href="{{ .Permalink }}"><span class="flag fi fi-{{ index $.Site.Data.langFlags (.Lang) }}"></span></a>
|
<a href="{{ .Permalink }}"><span class="flag fi fi-{{ index $.Site.Data.langFlags (.Lang) }}"></span></a>
|
||||||
{{ end}}
|
{{ end}}
|
||||||
{{ end }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<article>
|
|
||||||
<h1 class="post-title">
|
|
||||||
<a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
{{ with .Params.Description }}
|
|
||||||
<div class="post-excerpt">{{ . }}</div>
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
{{ if .Params.Cover }}
|
<article>
|
||||||
<figure class="post-cover">
|
<h1 class="post-title">
|
||||||
<img src="{{ .Params.Cover | absURL }}" alt="{{ .Title }}" />
|
<a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
|
||||||
|
</h1>
|
||||||
|
|
||||||
{{ if .Params.CoverCaption }}
|
{{ with .Params.Description }}
|
||||||
<figcaption class="center">{{ .Params.CoverCaption | markdownify }}</figcaption>
|
<div class="post-excerpt">{{ . }}</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</figure>
|
|
||||||
|
{{ if .Params.Cover }}
|
||||||
|
<figure class="post-cover">
|
||||||
|
<img src="{{ .Params.Cover | absURL }}" alt="{{ .Title }}" />
|
||||||
|
|
||||||
|
{{ if .Params.CoverCaption }}
|
||||||
|
<figcaption class="center">{{ .Params.CoverCaption | markdownify }}</figcaption>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
</figure>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
{{- if .Params.toc }}
|
{{- if .Params.toc }}
|
||||||
<hr />
|
<hr />
|
||||||
<aside id="toc">
|
<aside id="toc">
|
||||||
<div class="toc-title">{{ i18n "tableOfContents" }}</div>
|
<div class="toc-title">{{ i18n "tableOfContents" }}</div>
|
||||||
{{ .TableOfContents }}
|
{{ .TableOfContents }}
|
||||||
</aside>
|
</aside>
|
||||||
<hr />
|
|
||||||
{{- end }}
|
|
||||||
|
|
||||||
{{ if .Params.Audio }}
|
|
||||||
<div class="post-audio">
|
|
||||||
<audio controls>
|
|
||||||
<source src="{{ .Params.Audio }}">
|
|
||||||
</audio>
|
|
||||||
</div>
|
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
<div class="post-content">
|
|
||||||
{{ .Content }}
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<div class="post-info">
|
|
||||||
{{ partial "tags.html" .Params.tags }}
|
|
||||||
{{ partial "categories.html" . }}
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
|
|
||||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
|
||||||
<polyline points="14 2 14 8 20 8"></polyline>
|
|
||||||
<line x1="16" y1="13" x2="8" y2="13"></line>
|
|
||||||
<line x1="16" y1="17" x2="8" y2="17"></line>
|
|
||||||
<polyline points="10 9 9 9 8 9"></polyline>
|
|
||||||
</svg>
|
|
||||||
{{ i18n "wordCount" .Page.WordCount }}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
|
|
||||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
|
|
||||||
<line x1="16" y1="2" x2="16" y2="6"></line>
|
|
||||||
<line x1="8" y1="2" x2="8" y2="6"></line>
|
|
||||||
<line x1="3" y1="10" x2="21" y2="10"></line>
|
|
||||||
</svg>
|
|
||||||
{{ if .Site.Params.dateformNumTime }}
|
|
||||||
{{ dateFormat .Site.Params.dateformNumTime .Date.Local }}
|
|
||||||
{{ else }}
|
|
||||||
{{ dateFormat "2006-01-02 15:04" .Date.Local }}
|
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
{{ if .Lastmod }}
|
|
||||||
{{ if not (eq .Lastmod .Date )}}
|
|
||||||
{{ if .Site.Params.dateformNumTime }}
|
|
||||||
({{ i18n "lastModified" }}: {{ dateFormat .Site.Params.dateformNumTime .Lastmod.Local }})
|
|
||||||
{{ else }}
|
|
||||||
({{ i18n "lastModified" }}: {{ dateFormat "2006-01-02 15:04" .Lastmod.Local }})
|
|
||||||
{{ end }}
|
|
||||||
{{ end }}
|
|
||||||
{{ end }}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{{- if .GitInfo }}
|
|
||||||
<p>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-git-commit">
|
|
||||||
<circle cx="12" cy="12" r="4"></circle>
|
|
||||||
<line x1="1.05" y1="12" x2="7" y2="12"></line>
|
|
||||||
<line x1="17.01" y1="12" x2="22.96" y2="12"></line>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<a href="{{ .Site.Params.gitUrl -}}{{ .GitInfo.Hash }}" target="_blank" rel="noopener">{{ .GitInfo.AbbreviatedHash }}</a>
|
|
||||||
@ {{ if .Site.Params.dateformNum }}{{ dateFormat .Site.Params.dateformNum .GitInfo.AuthorDate.Local }}{{ else }}{{ dateFormat "2006-01-02" .GitInfo.AuthorDate.Local }}{{ end }}
|
|
||||||
</p>
|
|
||||||
{{- end }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{{- if .Site.Params.EnableSharingButtons }}
|
|
||||||
<hr />
|
|
||||||
<div class="sharing-buttons">
|
|
||||||
{{ partial "sharing-buttons.html" . }}
|
|
||||||
</div>
|
|
||||||
{{- end }}
|
{{- end }}
|
||||||
|
|
||||||
{{ partial "pagination-single.html" . }}
|
{{ if .Params.Audio }}
|
||||||
|
<div class="post-audio">
|
||||||
|
<audio controls>
|
||||||
|
<source src="{{ .Params.Audio }}">
|
||||||
|
</audio>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
{{ if .Site.DisqusShortname }}
|
<div class="post-content">
|
||||||
{{ if not (eq .Params.Comments "false") }}
|
{{ .Content }}
|
||||||
<div id="comments">
|
{{ if .Page.Store.Get "hasMermaid" }}
|
||||||
{{ template "_internal/disqus.html" . }}
|
<script type="module">
|
||||||
</div>
|
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
|
||||||
|
mermaid.initialize({ startOnLoad: true });
|
||||||
|
</script>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
{{ if .Site.Params.Commento.Url }}
|
</div>
|
||||||
<script defer src={{ .Site.Params.Commento.Url }}></script>
|
</article>
|
||||||
<div id="commento"></div>
|
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
</main>
|
<hr />
|
||||||
|
|
||||||
|
<div class="post-info">
|
||||||
|
{{ partial "tags.html" .Params.tags }}
|
||||||
|
{{ partial "categories.html" . }}
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||||
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||||
|
class="feather feather-file-text">
|
||||||
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
||||||
|
<polyline points="14 2 14 8 20 8"></polyline>
|
||||||
|
<line x1="16" y1="13" x2="8" y2="13"></line>
|
||||||
|
<line x1="16" y1="17" x2="8" y2="17"></line>
|
||||||
|
<polyline points="10 9 9 9 8 9"></polyline>
|
||||||
|
</svg>
|
||||||
|
{{ i18n "wordCount" .Page.WordCount }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||||
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||||
|
class="feather feather-calendar">
|
||||||
|
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
|
||||||
|
<line x1="16" y1="2" x2="16" y2="6"></line>
|
||||||
|
<line x1="8" y1="2" x2="8" y2="6"></line>
|
||||||
|
<line x1="3" y1="10" x2="21" y2="10"></line>
|
||||||
|
</svg>
|
||||||
|
{{ if .Site.Params.dateformNumTime }}
|
||||||
|
{{ dateFormat .Site.Params.dateformNumTime .Date.Local }}
|
||||||
|
{{ else }}
|
||||||
|
{{ dateFormat "2006-01-02 15:04" .Date.Local }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ if .Lastmod }}
|
||||||
|
{{ if not (eq .Lastmod .Date )}}
|
||||||
|
{{ if .Site.Params.dateformNumTime }}
|
||||||
|
({{ i18n "lastModified" }}: {{ dateFormat .Site.Params.dateformNumTime .Lastmod.Local }})
|
||||||
|
{{ else }}
|
||||||
|
({{ i18n "lastModified" }}: {{ dateFormat "2006-01-02 15:04" .Lastmod.Local }})
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{{- if .GitInfo }}
|
||||||
|
<p>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||||
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||||
|
class="feather feather-git-commit">
|
||||||
|
<circle cx="12" cy="12" r="4"></circle>
|
||||||
|
<line x1="1.05" y1="12" x2="7" y2="12"></line>
|
||||||
|
<line x1="17.01" y1="12" x2="22.96" y2="12"></line>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<a href="{{ .Site.Params.gitUrl -}}{{ .GitInfo.Hash }}" target="_blank" rel="noopener">{{ .GitInfo.AbbreviatedHash
|
||||||
|
}}</a>
|
||||||
|
@ {{ if .Site.Params.dateformNum }}{{ dateFormat .Site.Params.dateformNum .GitInfo.AuthorDate.Local }}{{ else }}{{
|
||||||
|
dateFormat "2006-01-02" .GitInfo.AuthorDate.Local }}{{ end }}
|
||||||
|
</p>
|
||||||
|
{{- end }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{- if .Site.Params.EnableSharingButtons }}
|
||||||
|
<hr />
|
||||||
|
<div class="sharing-buttons">
|
||||||
|
{{ partial "sharing-buttons.html" . }}
|
||||||
|
</div>
|
||||||
|
{{- end }}
|
||||||
|
|
||||||
|
{{ partial "pagination-single.html" . }}
|
||||||
|
|
||||||
|
{{ if .Site.DisqusShortname }}
|
||||||
|
{{ if not (eq .Params.Comments "false") }}
|
||||||
|
<div id="comments">
|
||||||
|
{{ template "_internal/disqus.html" . }}
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ if .Site.Params.Commento.Url }}
|
||||||
|
<script defer src={{ .Site.Params.Commento.Url }}></script>
|
||||||
|
<div id="commento"></div>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
</main>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
Loading…
Reference in a new issue