faercol/hugo-relie
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add support for mermaid graphs

Browse source
This commit is contained in:
Melora Hugues 2023-10-01 13:39:28 +02:00
parent df3b911030
commit 07c8a13e2c
4 changed files with 193 additions and 142 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
static/mermaid.css Normal file
View 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;
}
}

4
themes/hello-friend-ng/layouts/_default/_markup/render-codeblock-mermaid.html Normal file
View file

@ -0,0 +1,4 @@
<pre class="mermaid">
{{- .Inner | safeHTML }}
</pre>
{{ .Page.Store.Set "hasMermaid" true }}

4
themes/hello-friend-ng/layouts/_default/baseof.html
View file

@ -1,10 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{ .Site.Language }}"> <html lang="{{ .Site.Language }}">
<head> <head>
{{ partial "head.html" . }} {{ partial "head.html" . }}
<link rel="stylesheet" href="/mermaid.css">
</head> </head>
{{ block "body" . }} {{ block "body" . }}
<body> <body>
{{ end }} {{ end }}
@ -22,4 +25,5 @@
{{ partial "javascript.html" . }} {{ partial "javascript.html" . }}
</body> </body>
</html> </html>

29
themes/hello-friend-ng/layouts/posts/single.html
View file

@ -3,7 +3,9 @@
<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"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-clock">
<circle cx="12" cy="12" r="10"></circle> <circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline> <polyline points="12 6 12 12 16 14"></polyline>
</svg> </svg>
@ -55,6 +57,13 @@
<div class="post-content"> <div class="post-content">
{{ .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 }}
</div> </div>
</article> </article>
@ -65,7 +74,9 @@
{{ partial "categories.html" . }} {{ partial "categories.html" . }}
<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-file-text"> <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> <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> <polyline points="14 2 14 8 20 8"></polyline>
<line x1="16" y1="13" x2="8" y2="13"></line> <line x1="16" y1="13" x2="8" y2="13"></line>
@ -76,7 +87,9 @@
</p> </p>
<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"> <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> <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="16" y1="2" x2="16" y2="6"></line>
<line x1="8" y1="2" x2="8" y2="6"></line> <line x1="8" y1="2" x2="8" y2="6"></line>
@ -101,14 +114,18 @@
{{- if .GitInfo }} {{- if .GitInfo }}
<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-git-commit"> <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> <circle cx="12" cy="12" r="4"></circle>
<line x1="1.05" y1="12" x2="7" y2="12"></line> <line x1="1.05" y1="12" x2="7" y2="12"></line>
<line x1="17.01" y1="12" x2="22.96" y2="12"></line> <line x1="17.01" y1="12" x2="22.96" y2="12"></line>
</svg> </svg>
<a href="{{ .Site.Params.gitUrl -}}{{ .GitInfo.Hash }}" target="_blank" rel="noopener">{{ .GitInfo.AbbreviatedHash }}</a> <a href="{{ .Site.Params.gitUrl -}}{{ .GitInfo.Hash }}" target="_blank" rel="noopener">{{ .GitInfo.AbbreviatedHash
@ {{ if .Site.Params.dateformNum }}{{ dateFormat .Site.Params.dateformNum .GitInfo.AuthorDate.Local }}{{ else }}{{ dateFormat "2006-01-02" .GitInfo.AuthorDate.Local }}{{ end }} }}</a>
@ {{ if .Site.Params.dateformNum }}{{ dateFormat .Site.Params.dateformNum .GitInfo.AuthorDate.Local }}{{ else }}{{
dateFormat "2006-01-02" .GitInfo.AuthorDate.Local }}{{ end }}
</p> </p>
{{- end }} {{- end }}
</div> </div>