Merge pull request #30 from Junyi-99/feat-mermaid

Feat mermaid & mermaid theme switch

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;

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,6 +57,7 @@ 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;

assets/css/main.css

@@ -47,7 +47,7 @@ section {
 }
 
 main {
-    outline:none;
+    outline: none;
 }
 
 /* Table of Contents */
@@ -58,7 +58,8 @@ main {
 
     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);
@@ -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 {
+/* <code> tag */
+code {
+    font-size: 14.4px; /* 18px * 0.6 */
+    padding: 0.1em 0.3em;
+}
+
+pre {
+    padding: 0.3em;
+}
+
+/* <kbd> inside <p> */
+/* <kbd> inside <pre> */
+/* 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
+    }
+}

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);

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",
+]
++++
+
+
+## \<code\>
+
+<code>Direct Code</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<User>) {
+  const user = getUser(id)
+  const newUser = { ...user, ...update }
+  saveUser(id, newUser)
+}
+```
+
+## \<pre\>
+
+<pre>pre text</pre>
+<pre>pre text</pre>
+<pre>pre text</pre>
+
+## \<kbd\>
+
+
+<p>Press <kbd>CTRL</kbd> + <kbd>C</kbd> to copy text (Windows).</p>
+
+<p>Press <kbd>CMD</kbd> + <kbd>C</kbd> to copy text (Mac OS).</p>
+
+Press <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd> to end the session.
+
+Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
+
+<pre>Press <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd> to end the session.</pre>

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 <br/>prevail!
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!
+```

layouts/_default/_markup/render-codeblock-mermaid.html

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

layouts/_default/single.html

@@ -41,4 +41,37 @@
     {{ 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" }}
+        {{ 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 }}
+
+        <script type="module">
+            function detectCurrentScheme3() {
+                    const defaultTheme = "{{ $colorTheme }}";
+                    if (localStorage !== null && localStorage.getItem("user-color-scheme")) {
+                            return localStorage.getItem("user-color-scheme");
+                    }
+                    if (defaultTheme === "dark" || defaultTheme === "light") {
+                            return defaultTheme;
+                    }
+                    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+            }
+            
+            import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
+            window.mermaid = mermaid;
+            window.initMermaid()
+            document.body.dispatchEvent(new CustomEvent(detectCurrentScheme3() + "-theme-set"));
+        </script>
+    {{ end }}
 {{ end }}
+

layouts/partials/theme-switcher.html

@@ -24,10 +24,19 @@
         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;