From ce5f1811c4bf892c3d567c501b3aa67e83185a26 Mon Sep 17 00:00:00 2001 From: Junyi Hou Date: Tue, 9 Apr 2024 15:20:53 +0800 Subject: [PATCH 1/3] add: mermaid support --- assets/css/main.css | 4 +- .../content/posts/advanced.md | 105 ++++++++++++++++++ .../_markup/render-codeblock-mermaid.html | 4 + layouts/_default/single.html | 11 ++ 4 files changed, 122 insertions(+), 2 deletions(-) create mode 100644 exampleSiteMultilingual/content/posts/advanced.md create mode 100644 layouts/_default/_markup/render-codeblock-mermaid.html diff --git a/assets/css/main.css b/assets/css/main.css index cd76a71..88cc182 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -167,8 +167,8 @@ th, td { pre { max-width: 100%; overflow: auto; - margin-top: 0; - margin-bottom: 0; + /* margin-top: 0; */ + /* margin-bottom: 0; */ } code, diff --git a/exampleSiteMultilingual/content/posts/advanced.md b/exampleSiteMultilingual/content/posts/advanced.md new file mode 100644 index 0000000..1c8f723 --- /dev/null +++ b/exampleSiteMultilingual/content/posts/advanced.md @@ -0,0 +1,105 @@ ++++ +author = "Hugo Authors" +title = "Advanced Diagram Usage" +date = "2024-04-09" +description = "Guide to advanced usage of Anubis2" +tags = [ + "emoji", +] ++++ + + +## 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 +``` + +## Mermaid Diagrams + +Get more examples at [here](https://mermaid.js.org/intro/) + +```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 +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 + +``` + +```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
prevail! + John-->>Alice: Great! + John->>Bob: How about you? + Bob-->>John: Jolly good! +``` diff --git a/layouts/_default/_markup/render-codeblock-mermaid.html b/layouts/_default/_markup/render-codeblock-mermaid.html new file mode 100644 index 0000000..753a2d8 --- /dev/null +++ b/layouts/_default/_markup/render-codeblock-mermaid.html @@ -0,0 +1,4 @@ +
+    {{- .Inner | safeHTML }}
+
+{{ .Page.Store.Set "hasMermaid" true }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 38f3b57..ddda08d 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -41,4 +41,15 @@ {{ if not .Params.disableComments }} {{ partial "comments.html" . }} {{ end }} + + {{/* When you use ```mermaid``, render-codeblock-mermaid.html is called and + `.Store.Set "hasMermaid"` is executed. + `.Store.Get "hasMermaid"` will return true and mermaid.js will be loaded. + */}} + {{ if .Store.Get "hasMermaid" }} + + {{ end }} {{ end }} From d557d2e08d67ba60c9909be6f791a73835cf98ef Mon Sep 17 00:00:00 2001 From: Junyi Hou Date: Tue, 9 Apr 2024 16:39:38 +0800 Subject: [PATCH 2/3] fix: the render error --- assets/css/dark.css | 2 + assets/css/light.css | 4 +- assets/css/main.css | 185 ++++++++++++------ .../content/posts/advanced copy.md | 58 ++++++ 4 files changed, 190 insertions(+), 59 deletions(-) create mode 100644 exampleSiteMultilingual/content/posts/advanced copy.md diff --git a/assets/css/dark.css b/assets/css/dark.css index 4725ba6..e8a73cc 100644 --- a/assets/css/dark.css +++ b/assets/css/dark.css @@ -19,6 +19,7 @@ --pre-color: #f8f8f2; --pre-bg-color: #292b2d; --pre-border-color: rgba(175, 184, 193, 0.3); + --kbd-bg-color: #404347; --bq-color: #ccc; --hr-color: #333; @@ -57,6 +58,7 @@ html[data-theme='dark'] { --pre-color: #f8f8f2; --pre-bg-color: #292b2d; --pre-border-color: rgba(175, 184, 193, 0.3); + --kbd-bg-color: #404347; --bq-color: #ccc; --hr-color: #333; diff --git a/assets/css/light.css b/assets/css/light.css index dc6f9d3..e5c0364 100644 --- a/assets/css/light.css +++ b/assets/css/light.css @@ -19,6 +19,7 @@ --pre-color: rgb(31, 35, 40); --pre-bg-color: #eff1f2; --pre-border-color: #e1e5e9; + --kbd-bg-color: #f7f7f7; --bq-color: #ccc; --hr-color: #ccc; @@ -56,7 +57,8 @@ html[data-theme="light"] { --pre-color: rgb(31, 35, 40); --pre-bg-color: #eff1f2; --pre-border-color: #e1e5e9; - + --kbd-bg-color: #f7f7f7; + --bq-color: #ccc; --hr-color: #ccc; diff --git a/assets/css/main.css b/assets/css/main.css index 88cc182..38ef763 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -47,7 +47,7 @@ section { } main { - outline:none; + outline: none; } /* Table of Contents */ @@ -55,11 +55,12 @@ main { .toc { cursor: zoom-in; display: block; - + margin-top: 1em; margin-bottom: 1em; - padding: 0.5em 1em; /* top & bottom, left & right */ - + padding: 0.5em 1em; + /* top & bottom, left & right */ + border: 1px solid var(--card-border-color); border-radius: var(--card-border-radius); background: var(--card-color); @@ -120,13 +121,13 @@ a:active { } a.skip-main { - left:-999px; - position:absolute; - top:auto; - width:1px; - height:1px; - overflow:hidden; - z-index:-999; + left: -999px; + position: absolute; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; + z-index: -999; } a.skip-main:focus, @@ -135,8 +136,8 @@ a.skip-main:active { top: 0px; width: auto; height: auto; - overflow:auto; - z-index:999; + overflow: auto; + z-index: 999; padding: 4px 6px 4px 6px; text-decoration: underline; border: none; @@ -157,18 +158,15 @@ table { } -th, td { +th, +td { padding: 0.5em 1em; border: 1px double var(--table-border-color); } - /* Code */ -pre { - max-width: 100%; - overflow: auto; - /* margin-top: 0; */ - /* margin-bottom: 0; */ +mark { + border-radius: 4px; } code, @@ -177,18 +175,49 @@ kbd { color: var(--pre-color); background-color: var(--pre-bg-color); font-family: 'Menlo', 'Courier New', 'Consolas', monospace; - font-size: 0.90em; + font-size: 14.4px; /* 18px * 0.6 */ line-height: 154%; border-radius: 6px; border: 1px solid var(--pre-border-color); - padding: 0.1em 0.3em; /* top, bottom */ - /* top, left, bottom, right */ + overflow: auto; } -pre code, pre kbd { +/* tag */ +code { + font-size: 14.4px; /* 18px * 0.6 */ + padding: 0.1em 0.3em; +} + +pre { + padding: 0.3em; +} + +/* inside

*/ +/* inside 

 */
+/* p kbd,
+pre kbd {
+    background-color: transparent;
+    border: none;
+} */
+p kbd,
+pre kbd,
+p kbd kbd,
+pre kbd kbd {
+    font-size: 14.4px; /* 18px * 0.6 */
+    background-color: var(--kbd-bg-color);
+    border: 1px solid var(--pre-border-color);
+    border-width: 1px 2px 2px 1px;
+    padding: 0.1em 0.3em;
+    margin-left: 0.2em;
+    margin-right: 0.2em;
+}
+
+/* ```python``` like */
+pre code {
     color: inherit;
     background-color: inherit;
     border: none;
+    padding: 0em;
 }
 
 /* Styles */
@@ -256,7 +285,7 @@ header h2 {
     font-weight: 700;
 }
 
-header nav:not(:empty){
+header nav:not(:empty) {
     background: var(--nav-bg-color);
     margin-top: var(--card-margin);
     max-width: 100%;
@@ -600,10 +629,10 @@ article figcaption {
 }
 
 article video {
-  max-width: 100%;
-  display: block;
-  height: auto;
-  margin: 0 auto .5em;
+    max-width: 100%;
+    display: block;
+    height: auto;
+    margin: 0 auto .5em;
 }
 
 code.has-jax {
@@ -631,7 +660,7 @@ code.has-jax {
     display: block;
 }
 
-.post-summary > p {
+.post-summary>p {
     display: block;
 }
 
@@ -643,34 +672,34 @@ code.has-jax {
     font-size: 14px;
 }
 
-.post-translations > li {
+.post-translations>li {
     display: inline;
 }
 
-.post-translations > li:not(:last-child)::after {
+.post-translations>li:not(:last-child)::after {
     content: "|";
     display: inline-block;
 }
 
-.post-translations > li a {
+.post-translations>li a {
     color: var(--link-color);
 }
 
-.post-translations > li a:hover,
-.post-translations > li a:focus {
+.post-translations>li a:hover,
+.post-translations>li a:focus {
     color: var(--link-state-color);
 }
 
 .read-next-title {
-    margin-bottom:  0;
+    margin-bottom: 0;
     margin-top: 3em;
     padding-top: 1em;
     border-top: 1px dashed var(--thead-bg-color);
 }
 
 .read-next-posts {
-    margin-top:  5px;
-    list-style-type:"- ";
+    margin-top: 5px;
+    list-style-type: "- ";
     padding-inline-start: 20px;
 }
 
@@ -710,7 +739,8 @@ code.has-jax {
     visibility: hidden;
 }
 
-.pagination-item a:hover, .pagination-item a:focus {
+.pagination-item a:hover,
+.pagination-item a:focus {
     border-bottom: 0;
 }
 
@@ -738,13 +768,15 @@ code.has-jax {
     justify-content: space-between;
 }
 
-ul.language-select, ul.footer-menu {
+ul.language-select,
+ul.footer-menu {
     padding-left: 0;
     list-style: none;
     display: flex;
 }
 
-ul.language-select > li, ul.footer-menu > li {
+ul.language-select>li,
+ul.footer-menu>li {
     margin-right: 1em;
 }
 
@@ -764,6 +796,7 @@ ul.language-select > li, ul.footer-menu > li {
     position: relative;
     overflow: auto;
 }
+
 .highlight pre {
     padding-right: 75px;
 }
@@ -787,8 +820,8 @@ ul.language-select > li, ul.footer-menu > li {
     background-color: #777;
     min-width: 25px;
     text-align: center;
-    border-radius: 5px;
 }
+
 .highlight-copy-btn:hover {
     transition-duration: .1s;
     background-color: #666;
@@ -804,12 +837,18 @@ ul.language-select > li, ul.footer-menu > li {
 
 /* Others */
 .noselect {
-    -webkit-touch-callout: none; /* iOS Safari */
-      -webkit-user-select: none; /* Safari */
-       -khtml-user-select: none; /* Konqueror HTML */
-         -moz-user-select: none; /* Firefox */
-          -ms-user-select: none; /* Internet Explorer/Edge */
-              user-select: none; /* Non-prefixed version, currently
+    -webkit-touch-callout: none;
+    /* iOS Safari */
+    -webkit-user-select: none;
+    /* Safari */
+    -khtml-user-select: none;
+    /* Konqueror HTML */
+    -moz-user-select: none;
+    /* Firefox */
+    -ms-user-select: none;
+    /* Internet Explorer/Edge */
+    user-select: none;
+    /* Non-prefixed version, currently
                                     supported by Chrome and Opera */
 }
 
@@ -851,17 +890,47 @@ ul.language-select > li, ul.footer-menu > li {
     }
 }
 
-{{ range site.Params.customCSS }}
-    {{ $custom := resources.Get . }}
-    {{ $custom.Content }}
-{{ end }}
+    {
+        {
+        range site.Params.customCSS
+    }
+}
 
-{{ if site.Params.isso.enabled }}
-  #isso-thread .textarea {
+    {
+        {
+        $custom : =resources.Get .
+    }
+}
+
+    {
+        {
+        $custom.Content
+    }
+}
+
+    {
+        {
+        end
+    }
+}
+
+    {
+        {
+        if site.Params.isso.enabled
+    }
+}
+
+#isso-thread .textarea {
     color: #000;
-  }
-  #isso-thread .isso-feedlink {
+}
+
+#isso-thread .isso-feedlink {
     position: relative;
     z-index: 1;
-  }
-{{ end }}
+}
+
+    {
+        {
+        end
+    }
+}
\ No newline at end of file
diff --git a/exampleSiteMultilingual/content/posts/advanced copy.md b/exampleSiteMultilingual/content/posts/advanced copy.md
new file mode 100644
index 0000000..5e7db92
--- /dev/null
+++ b/exampleSiteMultilingual/content/posts/advanced copy.md	
@@ -0,0 +1,58 @@
++++
+author = "Hugo Authors"
+title = "Usage of code, pre, kbd"
+date = "2024-04-09"
+description = "Guide to advanced usage of Anubis2"
+tags = [
+    "emoji",
+]
++++
+
+
+## \
+
+Direct Code
+
+`A verrrrrryyyyy llloooonnnggg coooodeeee`
+
+`code` `is` `here`
+
+```plain
+multiline
+code
+here
+```
+
+```typescript
+interface User {
+  id: number
+  firstName: string
+  lastName: string
+  role: string
+}
+ 
+function updateUser(id: number, update: Partial) {
+  const user = getUser(id)
+  const newUser = { ...user, ...update }
+  saveUser(id, newUser)
+}
+```
+
+## \
+
+
pre text

+
pre text

+
pre text

+
+## \
+
+
+
Press CTRL + C to copy text (Windows).

+
+
Press CMD + C to copy text (Mac OS).

+
+Press CTRL+ALT+Delete to end the session.
+
+Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.
+
+
Press CTRL+ALT+Delete to end the session.

\ No newline at end of file

From 3ae4b0a8b0b13fed969e73c4a839782279fc0c23 Mon Sep 17 00:00:00 2001
From: Junyi Hou 
Date: Tue, 9 Apr 2024 16:42:47 +0800
Subject: [PATCH 3/3] feat: mermaid theme auto switch

---
 assets/js/load-mermaid.js            | 69 ++++++++++++++++++++++++++++
 layouts/_default/single.html         | 24 +++++++++-
 layouts/partials/theme-switcher.html | 18 ++++----
 3 files changed, 102 insertions(+), 9 deletions(-)
 create mode 100644 assets/js/load-mermaid.js

diff --git a/assets/js/load-mermaid.js b/assets/js/load-mermaid.js
new file mode 100644
index 0000000..75b1df5
--- /dev/null
+++ b/assets/js/load-mermaid.js
@@ -0,0 +1,69 @@
+
+/*!
+  * Simple-Jekyll-Search
+  * Copyright 2015-2020, Christian Fei
+  * Licensed under the MIT License.
+  */
+
+(function(window){
+    'use strict'
+    
+      const elementCode = '.mermaid'
+      const loadMermaid = function(theme) {
+        window.mermaid.initialize({theme})
+        window.mermaid.init({theme}, document.querySelectorAll(elementCode))
+      }
+      const saveOriginalData = function(){
+        return new Promise((resolve, reject) => {
+          try {
+            var els = document.querySelectorAll(elementCode),
+                count = els.length;
+            els.forEach(element => {
+              element.setAttribute('data-original-code', element.innerHTML)
+              count--
+              if(count == 0){
+                resolve()
+              }
+            });
+          } catch (error) {
+           reject(error) 
+          }
+        })
+      }
+      const resetProcessed = function(){
+        return new Promise((resolve, reject) => {
+          try {
+            var els = document.querySelectorAll(elementCode),
+                count = els.length;
+            els.forEach(element => {
+              if(element.getAttribute('data-original-code') != null){
+                element.removeAttribute('data-processed')
+                element.innerHTML = element.getAttribute('data-original-code')
+              }
+              count--
+              if(count == 0){
+                resolve()
+              }
+            });
+          } catch (error) {
+           reject(error) 
+          }
+        })
+      } 
+    
+      const init = ()=>{
+        saveOriginalData()
+        .catch( console.error )
+        document.body.addEventListener('dark-theme-set', ()=>{
+          resetProcessed()
+          .then(loadMermaid('dark'))
+          .catch(console.error)
+        })
+        document.body.addEventListener('light-theme-set', ()=>{
+          resetProcessed()
+          .then(loadMermaid('default'))
+          .catch(console.error)
+        })
+      }
+      window.initMermaid = init
+    })(window);
\ No newline at end of file
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index ddda08d..c701504 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -46,10 +46,32 @@
         `.Store.Set "hasMermaid"` is executed.
         `.Store.Get "hasMermaid"` will return true and mermaid.js will be loaded.
     */}}
+    
     {{ if .Store.Get "hasMermaid" }}
+        {{ partial "resource.html" (dict "context" . "type" "js" "filename" "js/load-mermaid.js") }}
+        
+        {{ $colorTheme := "light" }}
+        {{ if and (isset site.Params "colortheme") (ne site.Params.colortheme "") }}
+            {{ $colorTheme = site.Params.colortheme | lower }}
+        {{ end }}
+
         
     {{ end }}
 {{ end }}
+
diff --git a/layouts/partials/theme-switcher.html b/layouts/partials/theme-switcher.html
index 8ad76de..4614a57 100644
--- a/layouts/partials/theme-switcher.html
+++ b/layouts/partials/theme-switcher.html
@@ -23,11 +23,20 @@
         let currentTheme
         let switchButton
         let autoDefinedScheme = window.matchMedia('(prefers-color-scheme: dark)')
-
+        
+        function switchTheme(e) {
+            currentTheme = (currentTheme === 'dark') ? 'light' : 'dark';
+            if (localStorage) localStorage.setItem(STORAGE_KEY, currentTheme);
+            document.documentElement.setAttribute('data-theme', currentTheme);
+            changeGiscusTheme(currentTheme);
+            document.body.dispatchEvent(new CustomEvent(currentTheme + "-theme-set"));
+        }
+        
         const autoChangeScheme = e => {
             currentTheme = e.matches ? 'dark' : 'light'
             document.documentElement.setAttribute('data-theme', currentTheme);
             changeGiscusTheme(currentTheme);
+            document.body.dispatchEvent(new CustomEvent(currentTheme + "-theme-set"));
         }
 
         document.addEventListener('DOMContentLoaded', function () {
@@ -58,13 +67,6 @@
             return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
         }
 
-        function switchTheme(e) {
-            currentTheme = (currentTheme === 'dark') ? 'light' : 'dark';
-            if (localStorage) localStorage.setItem(STORAGE_KEY, currentTheme);
-            document.documentElement.setAttribute('data-theme', currentTheme);
-            changeGiscusTheme(currentTheme);
-        }
-
         function showContent() {
             document.body.style.visibility = 'visible';
             document.body.style.opacity = 1;