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>
|
||||
<html lang="{{ .Site.Language }}">
|
||||
<head>
|
||||
{{ partial "head.html" . }}
|
||||
</head>
|
||||
|
||||
{{ block "body" . }}
|
||||
<body>
|
||||
<head>
|
||||
{{ partial "head.html" . }}
|
||||
<link rel="stylesheet" href="/mermaid.css">
|
||||
</head>
|
||||
|
||||
{{ block "body" . }}
|
||||
|
||||
<body>
|
||||
{{ end }}
|
||||
|
||||
<div class="container">
|
||||
{{ partial "header.html" . }}
|
||||
<div class="container">
|
||||
{{ partial "header.html" . }}
|
||||
|
||||
<div class="content">
|
||||
{{ block "main" . }}{{ end }}
|
||||
</div>
|
||||
|
||||
{{ block "footer" . }}
|
||||
{{ partial "footer.html" . }}
|
||||
{{ end }}
|
||||
<div class="content">
|
||||
{{ block "main" . }}{{ end }}
|
||||
</div>
|
||||
|
||||
{{ partial "javascript.html" . }}
|
||||
</body>
|
||||
{{ block "footer" . }}
|
||||
{{ partial "footer.html" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{ partial "javascript.html" . }}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,139 +1,156 @@
|
|||
{{ define "main" }}
|
||||
<main class="post">
|
||||
<main class="post">
|
||||
|
||||
<div class="post-info">
|
||||
<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">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<polyline points="12 6 12 12 16 14"></polyline>
|
||||
</svg>
|
||||
{{ i18n "readingTime" .Page.ReadingTime }}
|
||||
<div class="post-info">
|
||||
<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">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<polyline points="12 6 12 12 16 14"></polyline>
|
||||
</svg>
|
||||
{{ i18n "readingTime" .Page.ReadingTime }}
|
||||
|
||||
{{ if .IsTranslated }} | {{ i18n "postAvailable" }}
|
||||
{{ range .Translations }}
|
||||
<a href="{{ .Permalink }}"><span class="flag fi fi-{{ index $.Site.Data.langFlags (.Lang) }}"></span></a>
|
||||
{{ end}}
|
||||
{{ end }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<article>
|
||||
<h1 class="post-title">
|
||||
<a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
|
||||
</h1>
|
||||
|
||||
{{ with .Params.Description }}
|
||||
<div class="post-excerpt">{{ . }}</div>
|
||||
{{ if .IsTranslated }} | {{ i18n "postAvailable" }}
|
||||
{{ range .Translations }}
|
||||
<a href="{{ .Permalink }}"><span class="flag fi fi-{{ index $.Site.Data.langFlags (.Lang) }}"></span></a>
|
||||
{{ end}}
|
||||
{{ end }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{{ if .Params.Cover }}
|
||||
<figure class="post-cover">
|
||||
<img src="{{ .Params.Cover | absURL }}" alt="{{ .Title }}" />
|
||||
<article>
|
||||
<h1 class="post-title">
|
||||
<a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
|
||||
</h1>
|
||||
|
||||
{{ if .Params.CoverCaption }}
|
||||
<figcaption class="center">{{ .Params.CoverCaption | markdownify }}</figcaption>
|
||||
{{ end }}
|
||||
</figure>
|
||||
{{ with .Params.Description }}
|
||||
<div class="post-excerpt">{{ . }}</div>
|
||||
{{ end }}
|
||||
|
||||
{{ 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 }}
|
||||
</figure>
|
||||
{{ end }}
|
||||
|
||||
{{- if .Params.toc }}
|
||||
<hr />
|
||||
<aside id="toc">
|
||||
<div class="toc-title">{{ i18n "tableOfContents" }}</div>
|
||||
{{ .TableOfContents }}
|
||||
</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>
|
||||
|
||||
{{- if .Params.toc }}
|
||||
<hr />
|
||||
<aside id="toc">
|
||||
<div class="toc-title">{{ i18n "tableOfContents" }}</div>
|
||||
{{ .TableOfContents }}
|
||||
</aside>
|
||||
<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 .Params.Audio }}
|
||||
<div class="post-audio">
|
||||
<audio controls>
|
||||
<source src="{{ .Params.Audio }}">
|
||||
</audio>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.DisqusShortname }}
|
||||
{{ if not (eq .Params.Comments "false") }}
|
||||
<div id="comments">
|
||||
{{ template "_internal/disqus.html" . }}
|
||||
</div>
|
||||
<div class="post-content">
|
||||
{{ .Content }}
|
||||
{{ if .Page.Store.Get "hasMermaid" }}
|
||||
<script type="module">
|
||||
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
|
||||
mermaid.initialize({ startOnLoad: true });
|
||||
</script>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.Commento.Url }}
|
||||
<script defer src={{ .Site.Params.Commento.Url }}></script>
|
||||
<div id="commento"></div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</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 }}
|
||||
Loading…
Reference in a new issue