fix: icon now shown in other languages.

This commit is contained in:
Junyi Hou 2024-09-11 12:06:53 +08:00
parent 422f416612
commit ac2950a4c0
No known key found for this signature in database
4 changed files with 113 additions and 2 deletions

View File

@ -0,0 +1 @@
<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="icon icon-tabler icons-tabler-outline icon-tabler-chart-histogram"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 3v18h18" /><path d="M20 18v3" /><path d="M16 16v5" /><path d="M12 13v8" /><path d="M8 16v5" /><path d="M3 11c6 0 5 -5 9 -5s3 5 9 5" /></svg>

After

Width:  |  Height:  |  Size: 468 B

View File

@ -0,0 +1,110 @@
+++
author = "Hugo Authors"
title = "Demo - Support for Diagrams"
date = "2024-05-06"
description = "Guide to advanced usage of Anubis2"
tags = [
"emoji",
]
+++
Feel free to switch between the light and dark themes to see how the diagram adapts its colors accordingly.
## Mermaid Diagrams
```mermaid
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1, 20d
section Another
Task in Another :2014-01-12, 12d
another task :24d
```
Get more examples at [About Mermaid](https://mermaid.js.org/intro/)
<!--more-->
```mermaid
gitGraph:
commit "Ashish"
branch newbranch
checkout newbranch
commit id:"1111"
commit tag:"test"
checkout main
commit type: HIGHLIGHT
commit
merge newbranch
commit
branch b2
commit
```
```mermaid
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```
```mermaid
sankey-beta
Pumped heat,"Heating and cooling, ""homes""",193.026
Pumped heat,"Heating and cooling, ""commercial""",70.672
```
```mermaid
sequenceDiagram
loop Daily query
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
end
```
```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!
```
## GoAT
```goat
. . . .--- 1 .-- 1 / 1
/ \ | | .---+ .-+ +
/ \ .---+---. .--+--. | '--- 2 | '-- 2 / \ 2
+ + | | | | ---+ ---+ +
/ \ / \ .-+-. .-+-. .+. .+. | .--- 3 | .-- 3 \ / 3
/ \ / \ | | | | | | | | '---+ '-+ +
1 2 3 4 1 2 3 4 1 2 3 4 '--- 4 '-- 4 \ 4
```

View File

@ -2,13 +2,13 @@
<div class="post-header"> <div class="post-header">
<header> <header>
{{ $random := (md5 .Title) }} {{ $random := (md5 .Title) }}
{{ $iconPath := printf "%s/icon.svg" .File.Dir }} {{ $iconPath := printf "%sicon.svg" .File.Dir }}
{{ if fileExists $iconPath }} {{ if fileExists $iconPath }}
<style> <style>
.post-icon-{{ $random }}::before { .post-icon-{{ $random }}::before {
display: inline-block; display: inline-block;
content: ''; content: '';
background: url("{{ $iconPath }}"); background: url("/{{ $iconPath }}");
width: 1.2em; width: 1.2em;
height: 1.2em; height: 1.2em;
background-size: auto 100%; background-size: auto 100%;